CSS轉換不能在導航

我有一個垂直導航菜單，我把3D變換rotateY。我把它旋轉了-25度，我想讓懸停狀態回到0deg。這有效，但是當我應用一個轉換來平滑它時，不會發生轉換。我只會發布我認爲相關的代碼。CSS轉換不能在導航

HTML用於導航和主容器

<body> 

<!-- Container --> 
<div class="maincontainer"> 

<!-- The header markup would be here. --> 

<!-- Navigation --> 
<div class="nav"> 
      <ul> 
       <li><a id="home" href="index.html"><img src="images/logo.png"   width="279" height="140" alt="FreeSky" /></a></li> 
       <li><a id="home" href="index.html">//Home</a></li> 
       <li><a id="about" href="about.html">//About</a></li> 
       <li><a id="services" href="services.html">//Services</a></li> 
       <li><a id="portfolio" href="portfolio.html">//Portfolio</a></li> 
       <li><a id="contact" href="contact.html">//Contact</a></li> 
      </ul> 
     </div> 

<!-- content markup and footer would be here --!> 

</div> <!-- Main container end --!>

而現在的CSS

ul { 
position: absolute; 
left: 0; 
right: 0; 
padding: 0; 
width: 200px; 
height: 310px; 
list-style: none; 
-webkit-perspective: 1000; 
-moz-perspective: 1000; 
-o-perspective: 1000; 
perspective: 1000; 
margin-left: 50px; 
margin-top: 43px; 
} 
.nav ul li { 
text-align: left; 
text-decoration: none; 
list-style-type: none; 
font-family: Arial, Helvetica, sans-serif; 
color: #FFFFFF; 
margin-top: 20px; 
-webkit-transform:rotateY(25deg); 
-moz-transform:rotateY(25deg); 
-o-transform:rotateY(25deg); 
transform:rotateY(25deg); 

-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
-o-transform-style: preserve-3d; 
transform-style: preserve-3d; 


-webkit-transition: transform 1s ease 0s; 
-moz-transition: transform 1s ease 0s; 
-o-transition: transform 1s ease 0s; 
transition: transform 1s ease 0s; 
} 
.nav ul li:hover { 
-webkit-transform:rotateY(0deg); 
-moz-transform:rotateY(0deg); 
-o-transform:rotateY(0deg); 
transform:rotateY(0deg); 
} 
.nav ul li a { 
font-size: 36px; 
text-decoration: none; 
color: #FFFFFF; 
-webkit-transition: 500ms ease; 
} 
.nav ul li a:hover { 
color: #CCCCCC; 


}

正如你所看到的，它有點怪異，我把我的標誌形象進入菜單，但那是因爲我想讓徽標的旋轉Y與菜單（同樣的消失點）正確對齊。此外，如果有的話，我可以用徽標替換主頁鏈接，將其作爲首頁鏈接。我敢打賭，我在某個地方犯了一個簡單的錯誤......無論如何，所有的幫助表示讚賞。

來源

2014-07-16 Leto

這是transform屬性的Webkit轉換問題。將transform更改爲-webkit-transform修復了此問題。

-webkit-transition: -webkit-transform 1s ease 0s;

來源

2014-07-16 22:47:14 nishanths

謝謝，知道這是簡單的像一個前綴，我沒有想到.. :) – Leto

CSS轉換不能在導航

回答

相關問題