3D transformations with CSS3

In the previous post we learned about rotate transformation method in 2D plane, also we learned how to animate in 2D plane. In this post I am going to explain how to rotate in 3D plane. In 3D space we have x and y axis like in 2D plane but with one more axis which is either going away from you or towards you. Please note that 3D transformation is currently implemented only in webkit browsers like Safari and Chrome, IE10 Platform Preview. The feature also works on iPad, iPhone and Android devices.  First of all we need to write markup for parent and child divs. The parent will act as a stage for the child which we are going to tranform in 3D space.

 

<div id=”per” class=”perCls”>
<div class=”box”>
</div>
</div>and CSS is.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;
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg)
}

With #per id we are just creating a stage for the child element and the definition  of perspective property specifies how the child will render in 3D space. Higher value of the perspective gives an impression as if you are viewing the object from a long distance thereby creating a very subtle 3D effect. Lesser value of the perspective gives an impression as if you are viewing the object from very close distance which creates a strong 3D effect. After setting the stage for an object, we are now set for the transformation of the object which we are doing with with #per .box class. We need a position element to do transformation. We have applied some background color.  Note that transform:rotateY(60deg); means you are rotating the element along Y axis. So the element will rotate in x-axis. You can check the demo here

Leave a Reply

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