我有一个垂直导航菜单，我在其中放置了 3D 变换 rotateY。我将它旋转了 -25 度，我希望悬停状态将其恢复到 0 度。那行得通，但是当我应用过渡来平滑它时，没有发生过渡。我只会发布我认为相关的代码。
导航和主容器的 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;
}
如您所见，我将 Logo 图像放入菜单有点奇怪，但那是因为我希望 Logo 的旋转 Y 与菜单的(相同消失点)正确对齐。此外，如果有的话，我可以用 Logo 替换主页链接，将其作为主页链接。我敢打赌我在某个地方犯了一个简单的错误...无论如何，我们将不胜感激。
最佳答案
这是 transform 属性的 Webkit 转换的问题。将 transform 更改为 -webkit-transform 可以解决此问题。
-webkit-transition: -webkit-transform 1s ease 0s;
关于html - CSS Transitions 不适用于导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24791455/