CSS3: transform 3D

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
transform 3D

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ả:

» Tiếp: Animation (Hoạt ảnh)
« Trước: transform 2D
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!