如何在CSS中製作菜單鏡像

我是CSS編碼的新手。在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>

該文本保持沒有「鏡像」？

來源

2012-11-07 user1805940

我認爲這個問題可以幫[1] [1] [你可以使用CSS來鏡像/翻轉文本？]：http://stackoverflow.com/questions/ 5406368/can-you-use-css-to-mirror-flip-text –

Mahmoud的鏈接可以幫助你，但直接的CSS不會爲你做 - 你需要複製菜單的DOM結構，並將鏡像CSS應用於副本。你可以做一個快速的photoshop模型，你期望這看起來如何？ – Beejamin

嘗試這一類APLY到菜單元素的副本：

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

來源

2012-11-07 12:26:17 akplebani

檢查這個blog。

這是有他們已討論了同樣的事情。

可能對您的設計

（或）是有用的

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

嘗試了這一點

來源

2012-11-07 12:29:34

您可以使用CSS 3 transform標籤旋轉的元素。試試這個：

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

來源

2012-11-07 12:32:11

如何在CSS中製作菜單鏡像

回答

相關問題