Tạo ảnh xoay liên tục. CSS viết:
<style type="text/css">
@-webkit-keyframes spaceboots {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(90deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
.ex img{
width: 100px;
height: 100px;
border-radius: 500px;
-webkit-animation-name:spaceboots;
-webkit-animation-duration:10s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
</style>
HTML viết:
<div class="ex"><img src="http://utnhan.wap.sh/wapmaster/photo/hoa-mai.jpg" alt="Demo"/></div>
Tạo ảnh xoay khi rê chuột vào ảnh. CSS viết:
<style type="text/css">
.ex1 img{
width: 100px;
height: auto;
border-radius: 50px;
margin-left:5%;
margin-bottom:20px;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
.ex1 img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow:3px 3px 4px #999;
}
</style>
HTML viết:
<div class="ex1"><img src="http://utnhan.wap.sh/wapmaster/photo/hoa-mai.jpg" alt="Demo"/></div>