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;
}
* {
margin: 0 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:
- 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.
- 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
![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
-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-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
![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;
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
![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;
}
* {|
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
![output-div-transition-on-hover.png]()