Transforms and Transitions Using CSS3 in HTML5

Introduction

In this article, we will learn how to build an animation website using CSS3 transformations and transitions using HTML5. This new feature allows a web developer to build and use a combination of HTML5, CSS, and JavaScript to animate objects on the web. This feature makes HTML5 more and more popular. CSS transitions allow the browsers to animate the change of CSS properties where changes to the property from an initial value to a final value. Each CSS transition and transformation properties have their own prefix that we must use depending on the browser. All of the CSS and JavaScript examples currently work only in WebKit-based browsers, such as Safari on the iPad. However, Mozilla-based browsers have their own versions of WebKit-based extensions that use the '-moz' prefix, and that should behave similarly.

CSS3 Transforms

CSS3 Transforms have three types of properties that we can use on HTML5 elements:

Rotation.
Scaling.
Translation.

Transforms are applied by setting the -webkit-transform CSS property with the desired list of transforms. CSS3 Transitions CSS3 Transitions are used to give an animation effect on HTML5 elements using the CSS properties. The drawback of CSS3 Transitions is that we have to apply a different rule depending on the browsers that we use. Therefore, we have to use all the properties or vendor's prefixes for a smoothly functioning code. This makes the program code longer.

The syntax used while defining the CSS3 Transitions is:

-webkit-transition: property_name duration: -webkit is used for browsers that have webkit features.
-moz-transition: property_name duration: -moz is used to run the code on Mozilla.
-o-transition: property_name duration: -o is used for Opera browsers.
-transition: property_name duration :

Example 1

In this example we use CSS3 Transitions for changing one image to another, on hover (transitions). We define two images markup in the div tag and the CSS transitions code fade out the one image to another on mouse hover on the image.

This is markup code of HTML5:

<body>
<div id="mydiv">
<img class="bottom" src="Desert.jpg" />
<img class="top" src="Chrysanthemum.jpg" />
<br />
<br />
</div>
</body>

This is the CSS Code:

<style>
#mydiv {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#mydiv img {
position: absolute;
left: 0;
-moz-transition: opacity 1s ease-in-out;
}
#mydiv img.top:hover {
opacity: 0;
}}
</style>

Here is the full Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-moz-transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
}
</style>
</head>
<body>
<div id="cf">
<img class="bottom" src="Desert.jpg" />
<img class="top" src="Chrysanthemum.jpg" />
<br />
<br />
</div>
</body>
</html>

Output

After the mouse hovers on the image this image fades out into another image.

Example 2

In this we use Transitions and 3d Transforms to flip an image by the z-axis when the mouse hovers on the image. Here is the markup code of HTML5:

<body>
<div id="Main">
<div id="Child" class="shadow">
<img src="Desert.jpg" style="height: 300px; width: 466px"/>
</div>
</div>
</body>

Then, the CSS code:

<style>#Main {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#Main {
-moz-perspective: 1000;
}
#Child {
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
}
#Main:hover #Child {
-moz-transform: rotateZ(180deg);
-moz-box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
}
.face.back {
display: block;
-moz-transform: rotateZ(180deg);
-moz-box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}</style>

Here the is full code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#Main {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#Main {
-moz-perspective: 1000;
}
#Child {
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
}
#Main:hover #Child {
-moz-transform: rotateZ(180deg);
-moz-box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
}
.face.back {
display: block;
-moz-transform: rotateZ(180deg);
-moz-box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
</style>
</head>
<body>
<div id="Main">
<div id="Child" class="shadow">
<img src="Desert.jpg" style="height: 300px; width: 466px"/>
</div>
</div>
</body>
</html>

Output

After the mouse hovers on the image, this image is flipped by the Z-axis: