CSS Transitions not working on navigation
Question
I have a verticle navigation menu of which I put the 3D transform rotateY. I rotated it -25deg, and I want the hover state to bring it back to 0deg. That worked, but when I apply a transition to smooth it out, no transition occurs. I will only post the code I feel is relevant.
HTML for the navigation and the main container
<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 --!>
And now the 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;
}
As you can see, its a bit weird that I put my logo image into the menu, but that was because I wanted the logo's rotate Y to line up correctly with the menu's (same vanishing point). Besides, I could replace the home link with the logo if anything, have that as the home link. I bet I am making a simple mistake somewhere... Anyway all help is appreciated.
1 answers
solution1
1 ACCPTED 2014-07-16 22:47:14
This is an issue with Webkit transitions for the transform property. Changing transform to -webkit-transform fixes this.
-webkit-transition: -webkit-transform 1s ease 0s;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.