html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--Created @ SoloLearn By Nagarajk-->
<!DOCTYPE html>
<html>
<head>
<title>Animations with Keyframes, Rotate, Scale and Skew</title>
<link href='https://fonts.googleapis.com/css?family=Wallpoet' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="exp">Clock wise</div>
<div class="exp2">Anti<br/>clock wise</div>
<div class="exp3">Y<br/>Position<br/>Rotate</div>
<div class="exp4">X<br/>Position<br/>Rotate</div>
<div class="exp5">Scale<br/>Low to High</div>
<div class="exp6">Scale<br/>High to Low</div>
<div class="exp7">Scale<br/>Y<br/>position</div>
<div class="exp8">Scale<br/>X<br/>position</div>
<div class="exp9">Skew<br/>Position<br/>CW</div>
<div class="exp10">Skew<br/>Position<br/>AW</div>
<div class="exp11">Skew<br/>Position<br/>Y</div>
<div class="exp12">Skew<br/>Position<br/>X</div>
<div class="exp13">Combo<br/>Spin +Scale<br>CW</div>
<div class="exp14">Combo<br/>Spin +Scale<br>AW</div>
<div class="exp15">Combo<br/>Spin +Scale<br>Y</div>
<div class="exp16">Combo<br/>Spin +Scale<br>X</div>
<div class="exp17">Combo<br/>Spin + Skew<br/>CW</div>
<div class="exp18">Combo<br/>Spin + Skew<br/>AW</div>
<div class="exp19">Combo<br/>Spin + Skew<br/>Y</div>
<div class="exp20">Combo<br/>Spin + Skew<br/>X</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
background: linear-gradient( 210deg, white 20%, lime 100%);
height:450px;
font-family:'Wallpoet';
font-size:scale(.2);
}
.exp{
width: 75px;
height: 75px;
border-radius: 100px;
background-color: lime;
color: green;
float:left;
text-align:center;
animation: spin 3s linear infinite;
}
/*Clock Wise Rotate*/
@keyframes spin
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.exp2{
width: 75px;
height: 75px;
border-radius: 100px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
alert("Thanks for Visitng")
alert("any suggestion!? Let me know(post comment)")
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run