3D animation with CSS3

In the post, 3D transformations with CSS3 we learned how to create 3D transformation. In this post we will animate this element in 3D by using the post, Animation with CSS3. We will be creating @keyframes rule to accomplish our goal. Our HTML would be

As we have learned, the parent div creates perspective for our element which is relatively positioned element.

.perCls{ width:300px; height:300px; border:1px solid #CCCCCC;}
#per{ perspective:400px; -webkit-perspective:400px; -webkit-transform:translate(200px,200px)}
#per .box{ width:300px; height:300px; margin:0 auto; position:relative; background:#009933; animation:my 2s;-webkit-animation:my 2s; }

@keyframes my{
from{ transform:rotateY(0deg); -webkit-transform:rotateY(0deg)}
to{ transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}
@-webkit-keyframes my{
from{ transform:rotateY(0deg); -webkit-transform:rotateY(0deg)}
to{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg)}

So, we have created our animation name as ‘my’ and we are rotating the element along Y axis. You can check the demo(Apple Safari) here

About the Author

Pravin Varma

Tech Lead at Calsoft

You may also like these