Transformations

Apply this codes to transform HTML elements
Note:- All the transformation examples are tested in Chrome

-webkit-    --> Used for safari and chrome browser
-o-            --> Used for Opera
-moz-        --> Used for Mozilla

Program code:
<!DOCTYPE html>
<html>
<head>
<title>Transformations
</title>
<style> 
div
{
width:100px;
height:100px;
background-color:blue;
border:1px solid black;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst /*IE9*/
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

div#divscale
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4); /* Safari and Chrome */
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
div#divscale:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-webkit-transform:rotate(360deg); /* Safari */
}

#rota
{
width:200px;
height:100px;
position:absolute;
top:200px;
left:500px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(-30deg); /* Safari and Chrome */
}

#rota:hover
{
-webkit-transform:rotate(-40deg);
}

div#divskew
{
position:absolute;
top:200px;
left:900px;
background-color:green;
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
div#divskew:hover{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(-30deg,-20deg); /* Safari and Chrome */
}
/*Text Effects*/
h1
{
color:blue;
text-shadow: 5px 5px 5px #ff0000;
}
</style>
</head>
<body>
<h1>Simple Transformation Examples</h1><hr/>
<div>Hello. This is an element.</div>
<div id="divskew">
This is skew text example.
</div>
<div id="divscale">Hello. This is a SCALE element.<br/>
HOVER ME!!
</div>
<div id="rota">
<h4>Hover Me</h4>
Hello!! Hover Me!!</div>
</body>
</html>

Soon Come with the tables in HTML 
Thanks!!