Question

我试图创建一个3D导航栏并遇到我的一个CSS规则没有做任何事情的问题，但是具有相似优先级的规则似乎工作正常。

这1不起作用：

#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

Answer 1

第二个（.bottom）li上的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/

3D Nav CSS3旋转变换不起作用

1 个答案: