0

I am newbie in CSS coding. Is there any easy option in CSS to make "mirror" of menu which is constructed like below. I would like to get exactly the same menu but in mirror.

HTML:

<ul class="nav">
<li class="blue"><a href="/index.php">Home</a></li>
<li class="red"><a href="#">About</a></li>
<li class="green"><a href="#">Contact</a></li>
</ul>
</div>

and CSS:

.navbox {
    float: left;
    position: relative;
}
ul.nav {
    background: url("shadow.png") no-repeat scroll 0 0 transparent;
    display: block;
    left: 0;
    list-style: none outside none;
    padding: 60px 0;
    position: relative;
    top: 0;
    width: 200px;
}
.nav li a {
    color: white;
    display: block;
    font-size: 14px;
    margin: 5px 0 0;
    padding: 7px 15px;
    text-decoration: none;
    width: 100px;
}
.nav li a:hover {background: url("border.png") no-repeat scroll 0 0 black;
color: white;
padding: 7px 15px 7px 30px;}
.blue a { background: url("border.png") no-repeat scroll 0 0 blue;}
.red a { background: url("border.png") no-repeat scroll 0 0 red;}
.green a {background: url("border.png") no-repeat scroll 0 0 green;}

Hello again and thanks for the answers.

It almost solves my problem:

.mirror {
    display:block; 
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform:matrix(-1, 0, 0, 1, 0, 0);
}

But, is there any option which could avoid "mirroring" of the text? I mean:

<li class="red"><a href="#">About</a></li>
<li class="green"><a href="#">Contact</a></li>

That text stay without "mirroring"?

4

3 回答 3

1

检查这个博客。

这与他们讨论过的事情相同。

可能对您的设计有用

（或者）

           .rotated{
            -  moz-transform: rotate(-180deg);
             -webkit-transform: rotate(-180deg);
             transform: rotate(-180deg);
               filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
             }

试试这个

于 2012-11-07T12:29:34.293 回答
0

尝试将此类应用于菜单元素的副本：

.mirror    {
   -prefix-transform: scale(-1, 1);
}
于 2012-11-07T12:26:17.433 回答
0

您可以使用 CSS 3transform标签来旋转元素。尝试这个：

.rotated {
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
}
于 2012-11-07T12:32:11.593 回答