Rotate3d sử dụng các tham số như nào?

Hàm rotate3d() trong CSS được sử dụng để xoay một phần tử xung quanh một trục cố định trong không gian 3D. Nó là một hàm transform mạnh mẽ vì bạn có thể xác định bất kỳ trục xoay nào.

Cú pháp của rotate3d() là:

CSS

transform: rotate3d(x, y, z, angle);

Hãy cùng tìm hiểu từng tham số:

1. x (Number):

   • Đại diện cho tọa độ X của vector xác định trục xoay.

   • Giá trị này là một số, có thể là dương hoặc âm.

   • Nếu bạn đặt x = 1 và y = 0, z = 0, thì trục xoay chính là trục X.

2. y (Number):

   • Đại diện cho tọa độ Y của vector xác định trục xoay.

   • Giá trị này là một số, có thể là dương hoặc âm.

   • Nếu bạn đặt y = 1 và x = 0, z = 0, thì trục xoay chính là trục Y.

3. z (Number):

   • Đại diện cho tọa độ Z của vector xác định trục xoay.

   • Giá trị này là một số, có thể là dương hoặc âm.

   • Nếu bạn đặt z = 1 và x = 0, y = 0, thì trục xoay chính là trục Z.

   Lưu ý quan trọng về x, y, z:

   • Ba tham số x, y, z cùng nhau tạo thành một vector xác định hướng của trục xoay.

   • Độ lớn của các giá trị này không quan trọng bằng tỷ lệ của chúng. Ví dụ, rotate3d(1, 0, 0, 45deg) sẽ tạo ra hiệu ứng tương tự như rotate3d(2, 0, 0, 45deg) hoặc rotate3d(0.5, 0, 0, 45deg) vì chúng đều chỉ định trục X là trục xoay. Trình duyệt sẽ tự động "chuẩn hóa" vector này.

   • Nếu tất cả x, y, z đều bằng 0, thì không có phép xoay nào xảy ra.

4. angle (Angle):

   • Đại diện cho góc xoay.

   • Có thể được chỉ định bằng các đơn vị góc như:

     • deg (degrees - độ): Ví dụ 45deg, 90deg.

     • rad (radians - radian): Ví dụ 0.785rad (tương đương 45 độ).

     • grad (gradians - gradian): Ví dụ 50grad (tương đương 45 độ).

     • turn (turns - vòng quay): Ví dụ 0.125turn (tương đương 45 độ).

   • Góc dương sẽ xoay theo chiều kim đồng hồ khi nhìn dọc theo trục xoay từ gốc tọa độ.

   • Góc âm sẽ xoay ngược chiều kim đồng hồ.

---

Ví dụ minh họa:

• Xoay quanh trục X:

  CSS

  transform: rotate3d(1, 0, 0, 45deg); /* Tương đương với rotateX(45deg) */

  Đây sẽ làm cho cạnh trên của phần tử lùi vào và cạnh dưới tiến ra.

• Xoay quanh trục Y:

  CSS

  transform: rotate3d(0, 1, 0, 30deg); /* Tương đương với rotateY(30deg) */

  Đây sẽ làm cho cạnh phải của phần tử lùi vào và cạnh trái tiến ra (nếu là góc dương).

• Xoay quanh trục Z:

  CSS

  transform: rotate3d(0, 0, 1, 60deg); /* Tương đương với rotateZ(60deg) hoặc rotate(60deg) */

  Đây sẽ xoay phần tử trong mặt phẳng 2D.

• Xoay quanh một trục chéo (ví dụ: đường chéo từ gốc tọa độ đi qua điểm (1, 1, 0)):

  CSS

  transform: rotate3d(1, 1, 0, 45deg);

  Hiệu ứng này sẽ phức tạp hơn khi hình dung trực quan, nhưng phần tử sẽ xoay quanh một đường chéo trong mặt phẳng XY.

---

Điều quan trọng cần nhớ khi sử dụng rotate3d():

• perspective: Để thấy được hiệu ứng 3D thực sự của rotate3d(), bạn cần áp dụng thuộc tính perspective cho phần tử cha của đối tượng được transform, hoặc cho chính đối tượng đó nếu nó là root của bối cảnh 3D. perspective tạo ra ảo giác về chiều sâu.CSS

  .container {
      perspective: 1000px; /* Cần có để nhìn thấy hiệu ứng 3D */
  }
  .element {
      transform: rotate3d(1, 1, 0, 45deg);
  }

• transform-origin: Mặc định, phép biến đổi được áp dụng từ tâm của phần tử. Bạn có thể thay đổi điểm gốc này bằng thuộc tính transform-origin (ví dụ: transform-origin: top left;).

rotate3d() cung cấp sự linh hoạt tối đa cho các phép xoay 3D, cho phép bạn xác định chính xác trục xoay mà mình muốn.