3D Animations Using Pure CSS3

What determined me to write this post and a few others was this page (works in Chrome and Safari only). Amazing what you can do by using only CSS. So, let’s take a look under the hood – the css for that effect looks like this:

#movieposters li { display:inline; float:left;
	-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
#movieposters li:hover { -webkit-perspective: 5000; }
	
#movieposters li img { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);
	-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
	-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
#movieposters li:hover img { -webkit-transform: rotateY(0deg); }

Kind of messy. But if we strip out the borders and shadows and arrange the code a bit, you’ll see it’s actually not that complicated.

#movieposters li { 
	display:inline; float:left;
	-webkit-perspective: 500; 
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
	-webkit-transition-duration: 0.5s; 
}

#movieposters li:hover { 
	-webkit-perspective: 5000; 
}
	
#movieposters li img { 
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform; 
	-webkit-transition-duration: 0.5s; 
}
#movieposters li:hover img { 
	-webkit-transform: rotateY(0deg); 
}

As you can see what’s being done are basically two transitions:

  • a perspective transition on the list item from a value of 500 to a value of 5000 on hover with a duration of 0.5s
  • and a rotate transform transition on the image inside the list item, with the same duration, from 30 degrees to 0 degrees

You can play with the values and see what other nice effects you can obtain. Maybe even leave a comment with a link to the nice effect that you’ve obtained.

Making it work in Firefox

Now what really intrigued me was the fact that it didnĀ“t work in Firefox. Why? After doing a couple of searches on Google the answer became obvious, -webkit- commands are for webkit-based browsers while Firefox requires commands prefixed with -moz-. I guess I should’ve known that already…

So I’ve added new lines for each command and replaced the -webkit- with -moz- thinking that it will work. It did, except for the fact that it had no animation. Couple of searches later and still no answer, so in the true spirit of a developer I typed in stackoverflow.com and asked my question. A couple of hours later I had my first answer and fortunately it held the solution to my problem (check it out here if you want). The transition-property had to be a -moz- property as well. Simple properties like transform or perspective don’t work like they do in webkit so I had to use -moz-transform and -moz-perspective instead.

So here’s the complete CSS code that I’ve ended using:

#movieposters li { 
	display:inline; float:left;
	-webkit-perspective: 500; 
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s; 
	-moz-perspective: 500; 
	-moz-transform-style: preserve-3d;
	-moz-transition-property: -moz-perspective; 
}

#movieposters li:hover { 
	-webkit-perspective: 5000; 
	-moz-perspective: 5000; 
}
		
#movieposters li img { 
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform; 
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s; 
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform; 				
	width: 210px;
}

#movieposters li:hover img { 
	-webkit-transform: rotateY(0deg); 
	-moz-transform: rotateY(0deg);
}

Also, you can check out a demo here: 3D CSS Animation




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *

Are you a human? * Time limit is exhausted. Please reload the CAPTCHA.