3D導航CSS3旋轉變換不工作

我想創建一個3D導航欄，並遇到問題與我的一個CSS規則沒有做任何事情，但具有類似優先的規則似乎工作正常。3D導航CSS3旋轉變換不工作

這條不工作：

#main-navbar.hover-home .bottom li:nth-child(1) { 
    transform: rotateX(0deg) translateZ(25px); 
}

Here是小提琴演示該問題。

我已經更新了我的小提琴以包含過渡效果，您可以看到.front li:nth-child(1)旋轉得很好，但.bottom li:nth-child(1)不動。

這些是控制旋轉類：

//works 
#main-navbar.hover-home .front li:nth-child(1) { 
    transform: rotateX(90deg) translateZ(25px); 
} 
//not working 
#main-navbar.hover-home .bottom li:nth-child(1) { 
    transform: rotateX(0deg) translateZ(25px); 
}

我試圖讓導航的.bottom部分也以相同的時間作爲。 front

來源

2015-05-26 SuperVeetz

AFAIK你沒有正確使用該功能... http://www.w3schools.com/cssref/css3_pr_transform.asp – odedta

也許嘗試改變你的小提琴，顯示什麼工作，你到底想要達到什麼目的，這條線是行不通的，因爲你的JQuery在選擇器'.front'上處理鼠標輸入事件而不是'.bottom' – EaziLuizi

這兩個事件都應該在'mouseenter'上觸發'.front li：n-child（1）' – SuperVeetz

MouseEnter事件不觸發，因爲前面UL重疊它，你需要改變HTML結構。看看這個小提琴：

<nav id="main-navbar">   
     <ul class="list-inline"> 
     <li><a href="#"> 
      <span class="front">Home</span> 
      <span class="bottom">Home</span></a> 
      </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul>   
    </nav>

https://jsfiddle.net/ashish1bhagat/LshqLfo2/4/

來源

2015-05-26 07:30:02

啊，這是正確的。謝謝。 – SuperVeetz

-1

嘗試第二（.bottom）李-webkit-transform 和-moz-transform

來源

2015-05-26 06:43:31

3D導航CSS3旋轉變換不工作

回答

相關問題