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

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

CSS

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

Output

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

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:

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.
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.
Blur - This is used when we want to provide a hazy shadow and it's an optional property.
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.
Color - By using this we can define the color of the shadow. It's also an optional property.
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

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

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 the transition to an element then use below CSS. CSS

-webkit-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -webkit-transform 5s;/*for Chrome and Safari */
-moz-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -moz-transform 5s;/*for Firefox*/
-o-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -o-transform 5s;/*for Opera*/

Output

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

#rotating_div:hover {
background-color: #1f06fb;
opacity:1;
width: 210px;
height: 210px;
margin-left: 400px;
border-radius: 50px;
box-shadow: 12px 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

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;
}
* {|
margin: 0 auto;
}
#rotating_div {
margin: 150px;
width: 150px;
height: 150px;
background: fb0505;
opacity: 0.50;
box-shadow: 10px 10px 5px 0 #eec2e2;
border-radius: 40px;
-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-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -webkit-transform 5s;/*for Chrome and Safari */
-moz-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -moz-transform 5s;/*for Firefox*/
-o-transition: opacity 5s, width 5s, height 5s, background 5s, margin-left 5s, -o-transform 5s;/*for Opera*/
}
#rotating_div:hover {
background-color: #1f06fb;
opacity:1;
width: 210px;
height: 210px;
margin-left: 400px;
border-radius: 50px;
box-shadow: 12px 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

13 Comments

Join the conversation! Your thoughts help the community grow.

Ismail Hakki Sen12y ago
thanks.
Amit Tripathi12y ago
Nice Article ......Good Job
Gopi Chand12y ago
Complete explaination about the topic..excellent.
srikanth ladi13y ago
Nice article, user can understand easily. Good job (preeti).
Preeti Zutshi13y ago
@ Aman Singhal Replace background: #fb0505; by giving path of your image for value of property background As: background:url(image-insert-main-body-for-text-on-image.jpg) and u can change your image on "hover" using same property....
vikash khanna13y ago
woa...........good...............thanxxxxx...
Aman Singhal13y ago
How, Preeti.
Preeti Zutshi13y ago
Ya Aman Singhal we can set div background an image instead of color........
Aman Singhal13y ago
Nice article, Can we set background image in div?
Vithal Wadje13y ago
super,i have playing with 3D output
Dinesh Beniwal13y ago
Good start
Satyapriya Nayak13y ago
Nice one
Deepak Middha13y ago
Nice explanation...keep it up..