Question

我有一个垂直导航菜单，我将3D变换旋转。我把它旋转了-25deg，我希望悬停状态将它恢复到0deg。这很有效，但是当我应用转换来平滑它时，不会发生转换。我只会发布我觉得相关的代码。

导航和主容器的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与菜单（相同的消失点）正确对齐。此外，如果有的话，我可以用徽标替换主页链接，将其作为主页链接。我打赌我在某个地方犯了一个简单的错误...无论如何，所有的帮助都表示赞赏。

Answer 1

这是transform属性的Webkit转换问题。将transform更改为-webkit-transform可解决此问题。

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

CSS Transitions不适用于导航

1 个答案: