Code xoay ảnh không giới hạn

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>