Div Rotation Using HTML5 and CSS3

Introduction 

In this article I will describe 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 output more attractive.

Step 1

Design a div in HTML and provide it properties through CSS.

HTML

<html>
<
head>
    
 <title>Div_Transposition</title>
</
head>
<
body>
        
 <div id="rotating_div">
        
 </div>
</body>
</
html>
 

CSS

/*CSS Document*/
body {background-color:#ceeddc;
}
* {
    
margin0 auto;
}
#rotating_div {
    
margin:150px;
    width:
150px;
    
height:150px;
    
background:fb0505;
}
 

Output


div-in-div-rotation.png


Step 2

Provide a
linking between HTML and CSS (in the HTML page):

<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 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-shadow10px 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

opacity0.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

-webkit-transform:rotate(2160deg);/*for Chrome and Safari */
-ms-transform:rotate(2160deg);/*for IE9*/
-moz-transform:rotate(2160deg);/*for Firefox*/
-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 transition to an element then use below CSS.

CSS

 -webkit-transitionopacity 5swidth 5sheight 5sbackground 5smargin-left 5s-webkit-transform 5s;/*for Chrome and Safari */
 
-moz-transitionopacity 5swidth 5sheight 5sbackground 5smargin-left 5s-moz-transform 5s;/*for Firefox*/
 
-o-transitionopacity 5swidth 5sheight 5sbackground 5smargin-left 5s-o-transform 5s;/*for Opera*/

Output

div-transition.png

Step 8: Hover selector

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


#rotating_div:hover
 {
        
background-color#1f06fb;

        opacity:1;
        
width210px;
        
height210px;
        
margin-left400px;  
        
border-radius50px;
        
box-shadow12px 12px 7px #35cee4;       
       
-webkit-transform:rotate(90deg);/*for Chrome and Safari */
       
-ms-transform:rotate(90deg);/*for IE9*/
      
-moz-transform:rotate(90deg);/*for Firefox*/
       
-o-transform:rotate(90deg);/*for Opera*/
    }


Output

div-transition-on-hover-.png
 

Finale code
 

HTML

<html>
<
head>
    
<title>Div_Transposition</title>
    
<link href="StyleSheet1.css" rel="stylesheet"type="text/css" />
</
head>
<
body>
        
<div id="rotating_div">
        
</div> 
</
body>
</
html>

CSS

/*CSS Document*/
body
 {background-color:#ceeddc;
}

*
 {|
    
margin0 auto;
}

#rotating_div
 {
    
margin150px;
    
width150px;
    
height150px;
    
backgroundfb0505;
    
opacity0.50;
    
box-shadow10px 10px 5px 0 #eec2e2;
    
border-radius40px;
   
-webkit-transform:rotate(2160deg);/*for Chrome and Safari */
    
-ms-transform:rotate(2160deg);/*for IE9*/
    
-moz-transform:rotate(2160deg);/*for Firefox*/
    
-o-transform:rotate(2160deg);/*for Opera*/
    
-webkit-transitionopacity 5swidth 5sheight 5sbackground 5smargin-left 5s-webkit-transform 5s;/*for Chrome and Safari */
    
-moz-transitionopacity 5swidth 5sheight 5sbackground 5smargin-left 5s-moz-transform 5s;/*for Firefox*/
    
-o-transitionopacity 5swidth 5sheight 5sbackground 5smargin-left 5s-o-transform 5s;/*for Opera*/ 
    } 
        
#rotating_div:hover {
        
background-color#1f06fb;
        
opacity:1;
        
width210px;
        
height210px;
        
margin-left400px;  
        
border-radius50px;
        
box-shadow12px 12px 7px #35cee4
       
-webkit-transform:rotate(90deg);/*for Chrome and Safari */
       
-ms-transform:rotate(90deg);/*for IE9*/
       
-moz-transform:rotate(90deg);/*for Firefox*/
       
-o-transform:rotate(90deg);/*for Opera*/
    }

Output

output-div-transition-on-hover.png

Next Recommended Readings