CSS3: Cách xoay ảnh khi chạm chuột vào dùng CSS3
Bạn copy đoạn code này và thử nhé, lưu ý thay ULR-ảnh bằng một nguồn ảnh cụ thể nhé:
<!DOCTYPE html> <html> <head> <title>Xoa ảnh khi chạm chuột</title> <style> .img{ text-align:center; } .img img{ transition:transform 10s; -webkit-transition:transform 10s; -moz-transition:transform 10s; -o-transition:transform 10s; } .img img:hover{ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); -o-transform:rotateY(360deg); -moz-transform:rotateY(360deg) } </style> </head> <body> <section class="img"> <img src="ULR-ảnh"> </section> </body> </html>
Kết quả demo:
Hãy chạm chuột vào ảnh dưới đây để thấy hiệu ứng: