CSS3: transform 3D
Giải phóng thời gian, khai phóng năng lực
Mục lục bài viết:
Phương thức rotateX()
ProtateX() cho phép bạn xoay một phần tử quanh trục Ox một góc bất kỳ.
Cú pháp: transform:rotateX(ndeg); /* n: một số bất kỳ */
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var i=0; function ftest(){ var t=document.getElementById("d1"); t.style.WebkitTransform='rotateX('+i++ +'deg)'; setTimeout("ftest()",20); } </script> <style> #d1{ width:100%; height:100px; background:linear-gradient(green,red); cursor:pointer; color:white; text-align:center; } </style> </head> <body> <div onClick="ftest();" id="d1">Click tôi => Tôi quay quanh trục Ox.<br>Càng click tôi càng quay nhanh.</div> </body> </html>
Kết quả:
Phương thức rotateY()
Với phương thức rotateY() bạn có thể xuay phần tử quanh trục Oy với một góc bất kỳ.
Cú pháp: transform:rotateY(ndeg); /* n: một số bất kỳ */
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var i=0; function ftest(){ var t=document.getElementById("d1"); t.style.WebkitTransform='rotateY('+i++ +'deg)'; setTimeout("ftest()",20); } </script> <style> #d1{ width:100%; height:100px; background:linear-gradient(green,red); cursor:pointer; color:white; text-align:center; } </style> </head> <body> <div onClick="ftest();" id="d1">Click tôi => Tôi quay quanh trục Oy.<br>Càng click tôi càng quay nhanh.</div> </body> </html>
Kết quả:
Phương thức rotateZ()
Với phương thức rotateZ() bạn có thể xuay phần tử quanh trục Oz với một góc bất kỳ.
Cú pháp: transform:rotateZ(ndeg); /* n: một số bất kỳ */
Ví dụ:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var i=0; function ftest(){ var t=document.getElementById("d1"); t.style.WebkitTransform='rotateZ('+i++ +'deg)'; setTimeout("ftest()",20); } </script> <style> #d1{ width:100%; height:100px; background:linear-gradient(green,red); cursor:pointer; color:white; text-align:center; } </style> </head> <body> <div onClick="ftest();" id="d1">Click tôi => Tôi quay quanh trục Oy.<br>Càng click tôi càng quay nhanh.</div> </body> </html>
Kết quả:
Giải phóng thời gian, khai phóng năng lực