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.
No comments:
Post a Comment