Friday, May 3, 2013

How to do a simple 3D Transform in CSS3?

In my previous post, I have described how to perform simple 2D transforms with some examples. Here I am going to describe a similar thing but here, our shape is going to transform it self in a 3D surface. have a look at the below output. shape mentioned as 'I am Happy' rotates around X axis to 360 degrees and shape 'I am sad' rotates around Y axis to 360 degrees within 7 minutes changing their colors. this happens once the user hovers over the shapes.

It's not that complex. You should know to apply styles to a simple div control to design the above shape. Little knowledge on how 2D transform happens in CSS3. All what have done above is to let the two shapes rotate in X axis and Y axis to 360 degrees once the user hovers on them. Meanwhile it changes the colors and all it happens within 7 seconds. observe the code below. since the code is simple enough to handle in the same file, i have not used an external style sheet to include the style tag.

<!DOCTYPE html>
<title>3D Transitions</title>

/*creates the initial div tag and two of its properties (background and transform defines time for transformations)*/
font:40px Verdana;
-webkit-transition: background 7S,-webkit-transform 7S;

/*once the use hovers over div element, transform rotate it over 360 degrees in X axis during 7 minuets*/
} /*get all the features of div to div2 and once the use hovers over div2 element, transform rotate it over 360 degrees in Y axis during 7 minuets*/
<div >I am Happy :) </div>
<div id="div2">I am Sad :( </div>

that's all you have to do.