html_program/transform.html at master · avani112/html_program · GitHub

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
29
30
31
32
33
34
<html>
	<head>
		<title> Rotation and Scale effect in CSS</title>
		<style>
				@-webkit-keyframes rotateIn {
           0% {
                  -webkit-transform: rotate(0deg) scale(1,1);
           }

					100%{
						     -webkit-transform:rotate(360deg) scale(2,2) ;
					}
        }
				.rotateIn:hover {
                 -webkit-animation-name: rotateIn;
				}
				.animated {
                  -webkit-animation-duration: 10s;
         }
		</style>
	</head>
	<body>
		<div class = "animated rotateIn" >
			<img src="1.jpg"><br>
		</div>
		<div class = "animated rotateIn">
			<img src="2.jpg"><br>
		</div>
		<div class = "animated rotateIn">
			<img src="3.jpeg"><br>
		</div>
	</body>
</html>