Post
Ask Question

Div Rotation Using HTML5 and CSS3

Introduction 

 
In this article, I will describe the movement of a Div or Element using HTML5 and CSS3. This movement is animation without using Flash. In this article, I will also describe Border Radius, Box Shadow and Opacity for making the output more attractive.
 
Step 1
 
Design a div in HTML and provide its properties through CSS. HTML
  1. <html>  
  2. <head>  
  3.      <title>Div_Transposition</title>  
  4. </head>  
  5. <body>  
  6.          <div id="rotating_div">  
  7.          </div>  
  8. </body>  
  9. </html> 
CSS
  1. /*CSS Document*/  
  2. body {background-color:#ceeddc;  
  3. }  
  4. * {  
  5.     margin: 0 auto;  
  6. }  
  7. #rotating_div {  
  8.     margin:150px;  
  9.     width:150px;  
  10.     height:150px;  
  11.     background:fb0505;  
  12. } 
Output
div-in-div-rotation.png
 
Step 2 Provide a linking between HTML and CSS (in the HTML page):
  1. <link href="StyleSheet1.css" rel="stylesheet" type="text/css" /> 
Step 3
 
Border radius property
 
We can make the corners of the div, image, etc. rounded using this property. This CSS property is supported in Internet Explorer 9+, Firefox 4+, Chrome, Safari 5+, and Opera.
 
CSS       
 
border-radius: 40px; Output
 
border-radius-in-div-rotation.png
 
Step 4: 
 
Box Shadow property
 
This property is used for making a shadow of a div. Box-shadow is a combination of six different values; they are:
  1. Horizontal - shadow - This is a required property of a box-shadow for specifying a horizontal shadow of a box; negative values cannot be given for this.
  2. Vertical - shadow - This is a required property of a box-shadow for specifying a vertical shadow of a box; negative values cannot be given for this.
  3. Blur - This is used when we want to provide a hazy shadow and it's an optional property.
  4. Spread - Spread defines the size of the shadow. It's used when we want to provide a specific size to the shadow, it's also an optional property.
  5. Color - By using this we can define the color of the shadow. It's also an optional property.
  6. Inset - Inset is required when we want to set the shadow to be inside or outside.
This property is supported in browsers IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1 
 
CSS
 
box-shadow: 10px 10px 5px 0 #eec2e2;
 
Output
 
box-shadow-in-div-rotation.png
 
Step 5
 
Opacity property
 
If we use opacity it will work like a transparent layer on an image or on a div etc. The opacity value lies between 0.0-1.0 and for the browsers Internet Explorer 8 and earlier we use filter:alpha(opacity=x) and the value of X lies between 0-100. A higher value makes the transparent layer heavier and element became less visible 
 
CSS
 
opacity: 0.50;
 
Output
 
opecity-on-div.png
 
Step 6
 
Transform property
 
Using the transform property we can make 2D & 3D transformations to an element, animation without using Flash. With the use of this property, we can provide a value for rotate, scale, move, skew, angle, translate, etc. to an element.
 
For IE the prefix is -ms-, for Firefox the prefix is -moz-, for Safari and Chrome the prefix is -webkit- and for Opera, the prefix is -o-. If we want to provide a value for rotation of an element in a transform.
 
CSS
  1. -webkit-transform:rotate(2160deg);/*for Chrome and Safari */  
  2. -ms-transform:rotate(2160deg);/*for IE9*/  
  3. -moz-transform:rotate(2160deg);/*for Firefox*/  
  4. -o-transform:rotate(2160deg);/*for Opera*/ 
Step 7
 
Transition property
 
Using the transition property of CSS3 we can make boxes, images, etc. move in various styles without using any animation. This property is not yet supported by IE. For Firefox the prefix is-moz-, for Safari and Chrome the prefix is -webkit- and for Opera, it's -o-.
 
There are two main things required for a transition, which are a CSS property which needs to be changed and time duration for this changed effect; the property can be one or more than one but the duration specification is required.
 
If we want to add one or more effects of the transition to an element then use below CSS. CSS
  1. -webkit-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -webkit-transform 5s;/*for Chrome and Safari */  
  2.  -moz-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -moz-transform 5s;/*for Firefox*/  
  3.  -o-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -o-transform 5s;/*for Opera*/ 
Output
 
div-transition.png
 
Step 8: 
 
Hoverselector
 
It is a selector, properties defined for it works on mouse hover. Supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1
 
CSS
  1. #rotating_div:hover {  
  2.         background-color: #1f06fb;  
  3.         opacity:1;  
  4.         width: 210px;  
  5.         height: 210px;  
  6.         margin-left: 400px;    
  7.         border-radius: 50px;  
  8.         box-shadow: 12px 12px 7px #35cee4;         
  9.        -webkit-transform:rotate(90deg);/*for Chrome and Safari */  
  10.        -ms-transform:rotate(90deg);/*for IE9*/  
  11.       -moz-transform:rotate(90deg);/*for Firefox*/  
  12.        -o-transform:rotate(90deg);/*for Opera*/  
  13.     } 
Output
 
onhover 
 
Finale code  
 
HTML
  1. <html>  
  2. <head>  
  3.     <title>Div_Transposition</title>  
  4.     <link href="StyleSheet1.css" rel="stylesheet"; type="text/css" />  
  5. </head>  
  6. <body>  
  7.         <div id="rotating_div">  
  8.         </div>   
  9. </body>  
  10. </html> 
CSS
  1. /*CSS Document*/  
  2. body {background-color:#ceeddc;  
  3. }  
  4. * {|  
  5.     margin: 0 auto;  
  6. }  
  7. #rotating_div {  
  8.     margin: 150px;  
  9.     width: 150px;  
  10.     height: 150px;  
  11.     background: fb0505;  
  12.     opacity: 0.50;  
  13.     box-shadow: 10px 10px 5px 0 #eec2e2;  
  14.     border-radius: 40px;  
  15.    -webkit-transform:rotate(2160deg);/*for Chrome and Safari */  
  16.     -ms-transform:rotate(2160deg);/*for IE9*/  
  17.     -moz-transform:rotate(2160deg);/*for Firefox*/  
  18.     -o-transform:rotate(2160deg);/*for Opera*/  
  19.     -webkit-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -webkit-transform 5s;/*for Chrome and Safari */  
  20.     -moz-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -moz-transform 5s;/*for Firefox*/  
  21.     -o-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -o-transform 5s;/*for Opera*/   
  22.     }   
  23.         #rotating_div:hover {  
  24.         background-color: #1f06fb;  
  25.         opacity:1;  
  26.         width: 210px;  
  27.         height: 210px;  
  28.         margin-left: 400px;    
  29.         border-radius: 50px;  
  30.         box-shadow: 12px 12px 7px #35cee4;   
  31.        -webkit-transform:rotate(90deg);/*for Chrome and Safari */  
  32.        -ms-transform:rotate(90deg);/*for IE9*/  
  33.        -moz-transform:rotate(90deg);/*for Firefox*/  
  34.        -o-transform:rotate(90deg);/*for Opera*/  
  35.     } 
Output
 
output-div-transition-on-hover.png
 


Similar Articles