Creating 3D Animations in CSS3
Although CSS3 transition property is pretty simple, but creating 3D stuff using this and other properties can be quite cumbersome at times. This tutorial is reserved to create 3D animations in CSS3 in a least difficult way. This would be done using a special property of CSS3 which can be found in the library with the name of -webkit-perspective. This property is what would be used in this tutorial as well.
The most important role in the execution of this task would, once again, be performed by HTML. It goes like this:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul id="movieposters"> <li> <img src="images/01_iron_man_2.jpg" alt="Iron Man 2" /> <div class="movieinfo"> <h3>Iron Man 2</h3> <p>With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...</p> <a href="#" title="Iron Man 2">More info</a> </div> </li> <!-- More movie posters here --> </ul> |
After that would come the CSS3 part which would mainly utilize the Safari reference library for CSS3 visual effects. This would work equally well with most other latest browsers.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
#movieposters { list-style:none; margin:100px 0; height:550px; } #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); } .movieinfo { border:10px solid #fcfafa; padding:20px; width:200px; height:180px; background-color:#deddcd; margin:-195px 0 0 55px; position:absolute; -moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888; -webkit-transform: translateZ(30px) rotateY(30deg); -webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; } #movieposters li:hover .movieinfo { -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px #888; margin:-175px 0 0 30px; } .movieinfo h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; } .movieinfo p { padding-bottom:15px; } .movieinfo a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; width:80px; text-align:center; margin:0 auto; -moz-border-radius:5px; -webkit-border-radius:5px; } .movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; } |
The above code would give the beautiful effects of 3D, including rotation, hovering and transitions. However, since this property is relatively new, some browsers might have problems executing it in the way it should be. Other than these minor problems, everything is perfectly fine with this animation code.
BlueHost | HostGator | Media Temple
