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>
<html>
<head>
<title>3D Transitions</title>
<style>

/*creates the initial div tag and two of its properties (background and transform defines time for transformations)*/
div
{
width:200px;
height:200px;
background:cyan;
border-radius:10px;
border-style:dotted;
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*/
div:hover
{
-webkit-transform:rotateX(360deg);
background:Orange;
} /*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#div2:hover
{
-webkit-transform:rotateY(360deg);
background:purple;
}
</style>
<!-------------------------------------------------------------->
</head>
<body>
<div >I am Happy :) </div>
<br/>
<div id="div2">I am Sad :( </div>
</body>
</html>

that's all you have to do.