Css hiệu ứng ảnh xoay cho web

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;">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); } </span>

 

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

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.

• 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.