CSS 3D transforms được dùng để thay đổi các phần tử HTML trong không gian ba chiều. Chúng xoay phần tử quanh trục x, trục y và trục z. Có ba loại transformation chính được liệt kê dưới đây:
- rotateX(): Xoay một phần tử quanh trục X của nó.
- rotateY(): Gây ra sự xoay quanh trục Y.
- rotateZ(): Cho phép xoay quanh trục Z.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
- rotateX(30deg): Xoay hộp 30 độ quanh trục X (trục ngang).
- rotateY(30deg) và rotateZ(30deg): Xoay hộp quanh trục Y (trục dọc) và trục Z (trục sâu). Điều này tạo hiệu ứng 3D.
The rotateX() Method
Phương thức rotateX() trong CSS dùng để xoay một phần tử HTML quanh trục X của nó. Trục X là trục nằm ngang.
html<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
transform: rotateX(45deg);
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
In this Example:
- rotateX(45deg): Xoay phần tử 45 độ xuống dưới quanh trục X.
- Điều này tạo hiệu ứng nghiêng 3D, làm cho cạnh trên di chuyển ra phía sau.
The rotateY() Method
Phương thức rotateY() trong CSS được dùng để xoay một phần tử HTML quanh trục Y dọc. Phương pháp này cho phép phần tử lật từ bên này sang bên kia. Tạo hiệu ứng xoay giống như gương.
html<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
transform: rotateY(45deg);
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
In this Example:
- rotateY(45deg): Áp dụng xoay 45 độ quanh trục Y. Làm cho bên trái của hộp di chuyển về phía người xem và bên phải di chuyển ra xa.
- Sự xoay này tạo ra hiệu ứng hình ảnh về phần tử xoay từ trái sang phải.
The rotateZ() Method
Phương thức rotateZ() trong CSS được dùng để xoay một phần tử HTML quanh trục Z. Trục Z vuông góc với màn hình. Sự xoay này ảnh hưởng đến phần tử như thể nó đang xoay phẳng trên màn hình.
html<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transform: rotateZ(45deg);
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends-->
In this example:
- rotateZ(45deg): Xoay hộp 45 độ quanh trục Z. Tạo ra một vòng xoắn như thể đang vặn một nút xoay.
- Sự xoay này xoay phần tử quanh tâm của nó. Thay đổi hướng của nó trên mặt phẳng của màn hình.
Best Practices for Using CSS 3D Transforms
- Sử dụng perspective property trên container cha để tăng cường hiệu ứng 3D của transformations.
- Kết hợp transforms với transitions hoặc animations để tạo hiệu ứng mượt mà cho các thay đổi trong không gian 3D.
- Kiểm tra khả năng đáp ứng trên các trình duyệt và thiết bị khác nhau. Điều này giúp đảm bảo tính nhất quán về hành vi và giao diện.