Rotate displacement scale warp animation
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<TITLE>CSS3 Transform transition Animation practice </title>
<style type= "Text/css" >
Body {
padding:10px 50px;
}
div {
margin:50px Auto;
width:100px;
height:100px;
background:red;
-webkit-transition:-webkit-transform 2s; Transition
}
. test1:hover {
-webkit-transform:rotate (45DEG); Rotating
}
. test2:hover {
-webkit-transform:translate (10px, 10px); Displacement
}
. test3:hover {
-webkit-transform:scale (1.5); Scaling
}
. test4:hover {
-webkit-transform:skew (10deg, 10deg); Twisted
}
. test5 {
Background:blue;
Position:absolute;
left:0;
top:0;
-webkit-animation:move 5s infinite linear; Animation
}
@-webkit-keyframes Move {//Keyframe
0% {
left:0;
top:0;
}
25% {
left:200px;
top:0;
}
50% {
left:200px;
top:200px;
}
75% {
left:0;
top:200px;
}
100% {
left:0;
top:0;
}
}
</style>
<body>
<div class= "test1" > Rotate </div>
<div class= "test2" > Displacement </div>
<div class= "test3" > Zoom </div>
<div class= "Test4" > Twist </div>
<div class= "Test5" > Animations </div>
</body>
CSS3 Transform Transition Animation Practice