Question

我是CSS编码的新手。 CSS中是否有任何简单的选项可以制作如下所示的菜单“镜像”。我希望得到完全相同的菜单，但是在镜子中。

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>

和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;}

再次问好，谢谢你的答案。

它几乎解决了我的问题：

.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);
}

但是，有没有可以避免文本“镜像”的选项？我的意思是：

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

该文字没有“镜像”？

Answer 1

选中blog。

这与他们讨论的内容相同。

可能对您的设计有用

（或）

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

试试这个

Answer 2

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

.mirror    {
   -prefix-transform: scale(-1, 1);
}

Answer 3

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

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

如何在CSS中制作菜单镜像

3 个答案: