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
Cũ vẫn chất
-
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
18 mặt đồng hồ Apple Watch thông dụng nhất
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
15 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3