Hiệu ứng ảnh xoay

Các hình ảnh hay biểu tượng liên kết có tác dụng rất lớn trong xây dựng website hay Blog.Nó làm cho người xem bớt nhàm chán với những liên kết toàn là kí tự.

Và sẽ càng tạo được thu hút khi các biểu tượng liên kết đó bất ngờ xoay chong chóng khi chúng ta rê chuột lên.....Sao lại không nhỉ?. 

DEMO

Ở đây Tôi có 3 đoạn Css tương ứng cho 3 kiểu xoay :

Xoay một vòng theo chiều kim đồng hồ

p#xoay3601 img{ /* Hieu ung xoay 360 do theo chieu kim dong ho */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}


p#xoay3601 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
} 

Xoay 70 độ theo chiều kim đồng hồ

p#xoay70 img{ /* hieu ung xoay 70 do */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}


p#xoay70 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
} 

Xoay một vòng ngược chiều kim đồng hồ

p#xoay3602 img{ /* hieu ung xoay 360 do nguoc kim dong ho */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}


p#xoay3602 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

Bạn COPY 1 trong các đoạn css trên ( hoặc tất cả nếu muốn ) , rồi chèn vào trước
]]></b:skin>

Còn đây lần lượt là 3 đoạn mã HTML cho 3 hiệu ứng trên:

<p id="xoay3601">
<a href="LINK LIEN KET/">
<img border="0" src="LINK HINH ANH" /></a>
</p>

<p id="xoay70">
<a href="LINK LIEN KET/">
<img border="0" src="LINK HINH ANH" /></a>
</p>

<p id="xoay3602">
<a href="LINK LIEN KET/">
<img border="0" src="LINK HINH ANH" /></a>
</p>

Mở rộng: Quan sát 3 đoạn mã trên,chúng ta có thể dễ dàng biến hóa nó xoay theo bất cứ chiều nào bạn muốn,và xoay theo bất cứ góc nào Bằng cách thay đổi các chỉ số góc.

-moz-transform: rotate(GOCQUAYdeg);
-webkit-transform: rotate(GOCQUAYdeg);
-o-transform: rotate(GOCQUAYdeg);
-ms-transform: rotate(GOCQUAYdeg);
transform: rotate(GOCQUAYdeg);

• Thay đổi GOCQUAY theo ý của bạn.Nên để chúng giống nhau .

Mặc định nó sẽ quay theo chiều kim đồng hồ.Nếu muốn quay ngược chiều kim đồng hồ thì thêm dấu " - " vào trước chỉ số góc quay.

Chúc bạn thành công

Nguồn : ktnha.blogspot.com

Copy : Hoithanhcaygiang.vn

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!