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
-
Code Sự tiến hóa tối thượng: Saiyan mới nhất và cách nhập code
Hôm qua -
5 cách lấy kim cương miễn phí trong Free Fire
Hôm qua 3 -
Hướng dẫn đổi DNS Google 8.8.8.8 và 8.8.4.4
Hôm qua -
Code Hiền Nhân Thuật mới nhất và cách nhập code
Hôm qua -
Arc Browser có mặt trên Windows 10, phiên bản ARM sắp ra mắt
Hôm qua -
Rắn cổ đỏ là rắn gì, có độc không?
Hôm qua -
Lời cảm ơn, tri ân thầy cô hay và xúc động
Hôm qua 1 -
Cách điều chỉnh kích thước ô trong bảng Word bằng nhau
Hôm qua -
Sân si là gì? Ý nghĩa của sân si?
Hôm qua -
Cách bật NFC trên iPhone dễ, nhanh nhất
Hôm qua