Transform CSS3 chắc chắn sẽ khiến bạn thích thú khi viết mã. Có 2 kiểu transform (2D) và transform (3D). Vậy những điều thú vị đó là gì? Hãy cùng đi tìm hiểu về thuộc tính transform trong CSS3 ngay sau đây.

Định nghĩa Transform CSS3 là gì?

Transform là một thuộc tính cho phép một phần tử thay đổi hình dạng, kích thước của nó và thuộc tính chuyển đổi vị trí kiểm soát tốc độ và thời gian của một phép biến đổi, làm cho nó trơn tru và tuyến tính.

Transform 2D

Transforms 2D sẽ xử lý hiệu ứng di chuyển 2D theo không gian hai chiều. Có thể dùng để xoay phần tử HTML theo góc 90, 180 độ.

Rotate() trong CSS3

Transform rotate() dùng để quay phần tử theo một góc nào đó.

Ví dụ:

-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);

transform-rotate

Translate() trong CSS3

Transform translate sẽ di chuyển vị trí tính từ điểm hiện tại.

transform: translate(20px, 20px); 
-ms-transform: translate(20px, 20px); /* IE 9 */
-webkit-transform: translate(20px, 20px); /* Safari */

Nó sẽ di chuyển theo trục tọa độ X, Y

transform: translateX(30px);
transform: translateY(20px); 

Ví dụ:

div.c {
  width: 150px;
  height: 80px;
  background-color: green;
  color: #fff;
}
div.c:hover {
    transform: translate(20px, 20px);
    -ms-transform: translate(20px, 20px); 
    -webkit-transform: translate(20px, 20px); 
    opacity: 0.5;
}

Skew() trong CSS3

Transform skew dùng để kéo chiều rộng và chiều cao của phần tử HTML.

-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);

transform-skew

Kết hợp Skew với trục tọa độ X, Y

transform: skew(10deg,30deg);

transform-skew-x-y

Scale() trong CSS3

Tranforms Scale sử dụng để kéo giãn đối tượng HTML theo tỉ lệ của trục tọa độ X, Y.

transform: scale(2,2);
-moz-transform: scale(2,2);
-webkit-transform: scale(2,2);
-o-transform: scale(2,2);
-ms-transform: scale(2,2);

transform-scale

Transform 3D

Transforms 3D với các phép biến đổi 3d (ba chiều), chúng ta có thể di chuyển phần tử sang trục x, trục y và trục z.

transforms-3d

Rotate rotate3D

Cách viết:

transform: rotate3d(1, 1, 1, 60deg);

transforms-rotate-3d

Hãy chạy ví dụ sau:

<!DOCTYPE html>
<html>
<head>
<style> 
body {
padding: 100px;
}
div.b {
  width: 150px;
  height: 80px;
  background-color: green;
  margin-bottom: 50px;
  color: #fff;
  transition: transform 1s ease-in;
}

div.b:hover{
  transform: rotate3d(1, 1, 1, 60deg);
}
</style>
</head>
<body>

<div class="b">Hello World!</div>
<br>

</body>
</html>

Transform translate3D

Transforms translate3d trong CSS3 sẽ di chuyển phần tử theo trục tọa độ X, Y, Z.

transform: translate3d(25px, 25px, 50px);

Như hình dưới bạn sẽ thấy rằng phần tử sẽ di chuyển sang trái theo trục X là 25px, trục Y xuống dưới là 25px và trục Z ra phía trước là 50px.

css3-3d-translation

Transforms scale3D

transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);

css3-3d-scale

Chức năng Transforms 3D

Bảng sau đây cung cấp tổng quan ngắn gọn về tất cả các chức năng Transforms 3D.

transforms-3d-1

Với thuộc tính Transform trong CSS bạn sẽ thực hiện xoay, kéo, lật phần tử HTML dễ dàng. Qua bài này bạn đã hiểu được cách sử dụng của Transform 2D và 3D chưa? Chúc bạn học CSS thật tốt nhé!

Category:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *