0

私は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>

そのテキストは「ミラーリング」せずに残りますか？

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 に答える