3D Transform trong CSS

Quách Tỉnh

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ài trước: 2D Transform trong CSS

Bài tiếp: Hiệu ứng chuyển đổi Transition trong CSS

Thứ Ba, 07/05/2019 11:45

5 ★ 1 👨 8.050

#CSS