3D Transform trong CSS
Transform trong CSS là những thuộc tính dùng để "biến hình" cho các phần tử ban đầu, cho phép chúng ta thay đổi vị trị, hình dáng hay xoay phần tử theo các chiều.
Có 2 kiểu thường gặp là 2D and 3D transformation.
(Transformation là cách gọi chung của hiệu ứng thay đổi hình dạng, kích thước và vị trí của phần tử)
Ở bài viết này, Quantrimang.com sẽ cùng bạn tìm hiểu về 3D Transform, các giá trị, cách sử dụng cũng như những ví dụ cụ thể nhất để bạn dễ dàng hình dung.
3D Transform là gì?
3D Transform là những thuộc tính dùng để xử lý hiệu ứng di chuyển 3D cho các phần tử theo 3 trục: x, y và z.
Vài ví dụ về 3D transform
Cú pháp để tạo transform như sau:
transform: value;
Các giá trị thường dùng với 3D transform là:
- rotateX()
- rotateY()
- rotateZ()
Transform rotateX()
RotateX() sử dụng để xoay phần tử quanh trục X theo một góc xác định.
#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Hình gốc :
(*Các ví dụ trong bài viết đều được transform từ hình này)
Hình Transform
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: LightSalmon;
color: #58257b;
border: 3px solid #58257b;
}
#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<p>Phần tử div thông thường.</p>
<div>
<h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>
<p>Phần tử div được rotateX 150deg.</p>
<div id="myDiv">
><h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>
</body>
</html>
Transform rotateY()
RotateY() sử dụng để xoay phần tử quanh trục Y theo một góc xác định.
#myDiv {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: LightSalmon;
color: #58257b;
border: 3px solid #58257b;
}
#myDiv {
-webkit-transform: rotateY(150deg); /* Safari */
transform: rotateY(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<p>Phần tử div thông thường.</p>
<div>
<h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>
<p>Phần tử div được rotateY 150deg.</p>
<div id="myDiv">
<h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>
</body>
</html>
Transform rotateZ()
RotateZ() sử dụng để xoay phần tử quanh trục Z theo một góc xác định.
#myDiv {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: LightSalmon;
color: #58257b;
border: 3px solid #58257b;
}
#myDiv {
-webkit-transform: rotateZ(150deg); /* Safari */
transform: rotateZ(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<p>Phần tử div thông thường.</p>
<div>
<h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>
<p>Phần tử div được rotateZ 150deg.</p>
<div id="myDiv">
<h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>
</body>
</html>
Để sử dụng thành thạo thuộc tính này, bạn phải thực hành nhiều và nắm bắt được các thông số tọa độ để điều hướng dễ dàng. Với transform bạn hoàn toàn có thể tạo ra giao diện với nhiều hình dạng 2D, 3D giúp trang web trở nên sinh động và chuyên nghiệp hơn. Quantrimang.com sẽ tìm hiểu kỹ hơn vấn đề này ở các bài học sau. Các bạn nhớ theo dõi nhé!
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
1000+ công thức chế thuốc Minecraft, cách chế thuốc Minecraft
Hôm qua -
Hướng dẫn lấy link nhóm trên Telegram
Hôm qua -
12 công cụ phân tích từ khóa tốt nhất
Hôm qua -
Cách gỡ cài đặt bất kỳ ứng dụng Android nào bằng ADB (bao gồm cả ứng dụng hệ thống và bloatware)
Hôm qua -
Kaspersky Antivirus bị cấm: Đây là 3 lựa chọn thay thế!
Hôm qua -
Code Tiệm Sushi Mơ Ước mới nhất và cách nhập code
Hôm qua -
Đặt mấy củ tỏi lên bàn thờ Thần Tài để hút tài lộc?
Hôm qua -
Code Yong Heroes mới nhất và cách nhập code
Hôm qua 1 -
Cách tạo liên kết trong PowerPoint
Hôm qua -
Ngày tốt, ngày đẹp tháng 4 năm 2025
Hôm qua