Transition: Hiệu ứng ảnh xoay 360deg khi rê chuột vào trong CSS3

Các hiệu ứng chuyển động trong CSS3 đều từ 2 thuộc tính chính là Transition và Animation. Từ 2 thuộc tính này bạn có thể làm rất nhiều hiệu ứng mà không cần tới javascript.

Các trình duyệt hỗ trợ

Transition có 4 tính chất:

transition-property: Thuộc tính chuyển động
transition-duration: Khoảng thời gian diễn ra hiệu ứng
transition-timing-function: Hiệu ứng sẽ sử dụng
transition-delay: thời gian chờ trước khi xảy ra hiệu ứng

Trong ví dụ dưới chúng ta chỉ áp dụng transition-property, transition-duration và hiệu ứng transform:

.rotate{
-webkit-transition-duration: 0.8s; /* Khoảng thời gian diễn ra hiệu ứng , vd ở đây hiệu ứng sẽ diễn ra trong 0.8s */
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform; /* Khai báo thuộc tính sẽ có hiệu ứng áp dụng, vd hiệu ứng transform */
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

.rotate:hover
{
-webkit-transform:rotate(360deg); /* Hiệu ứng sẽ áp dụng, vd xoay 360deg */
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

<DEMO>http://blog.vivekv.com/demo/rotate_image/</DEMO> theo blog.vivekv.com

Áp dụng những thuộc tính khác tại để hiểu rõ hơn về CSS3 transition.