Definition :
These are the animations which are meant for performing operations based on the dimensions and directions provided within the animations.
Program 1 :
<html>
<style type=”text/css”>
div
{
margin-top: 100px;
width: 100px;
height: 100px;
font-size: 25px;
border: 1px solid red;
background-color: green;
transfprm: translate(1000px, 100px);
}
</style>
<body>
<div> Hello </div>
</body>
</html>
Program 2 :
<html>
<style type=”text/css”>
div
{
margin-top:100px;
width:100px;
height:100px;
font-size:25px;
border:1px solid red;
background-color:green;
transform:rotate(90deg);
}
</style>
<body>
<div>HELLO</div>
</body>
</html>
Program 3 :
<html>
<style type=”text/css”>
div
{
margin-left:100px;
width:100px;
height:100px;
font-size:25px;
border:1px solid red;
background-color:green;
transform:skew(20deg,10deg);
}
</style>
<body>
<div>HELLO</div>
</body>
</html>