52. 3D Transform trong CSS

3D Transform trong CSS: 3D transforms cho phép bạn thực hiện các biến đổi 3D trên các phần tử trang web của bạn, bao gồm dịch chuyển, xoay, co giãn và nhiều hiệu ứng 3D khác. Dưới đây là một số ví dụ về cách sử dụng các 3D transforms trong CSS:

1. Dịch chuyển 3D (Translate3D):

css

.translated3d-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate3d(50px, 20px, 30px);
}

Trong ví dụ này, hộp sẽ bị dịch chuyển theo các hướng x, y và z.

2. Xoay 3D (Rotate3D):

css

.rotated3d-box {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotate3d(1, 1, 1, 45deg);
}

Hộp trong ví dụ này sẽ bị xoay 45 độ quanh trục x, y và z.

3. Co giãn 3D (Scale3D):

css

.scaled3d-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale3d(1.5, 0.8, 1);
}

Hộp trong ví dụ này sẽ bị co giãn theo các hướng x, y và z.

4. Kết hợp nhiều biến đổi 3D:

css

.combined-3d-transforms {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: translate3d(30px, 30px, 20px) rotate3d(1, 1, 1, 20deg) scale3d(1.2, 0.8, 1);
}

Trong ví dụ này, hộp sẽ trải qua một loạt biến đổi dịch chuyển, xoay và co giãn 3D.

5. Gốc biến đổi 3D (Transform Origin 3D):

css

.transform-origin-3d-box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transform: rotate3d(1, 1, 1, 45deg);
  transform-origin: bottom right;
}

Hộp trong ví dụ này sẽ bị xoay 45 độ quanh trục x, y và z, và điểm gốc của biến đổi 3D sẽ nằm ở góc dưới bên phải.

Nhớ rằng, hỗ trợ cho các hiệu ứng 3D có thể khác nhau trên các trình duyệt và thiết bị, và việc sử dụng 3D transforms cần cân nhắc để đảm bảo tương thích và hiệu suất tốt.