Thuộc tính Transform trong Css3

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é!

Related Posts

Hover-CSS-1

Hiệu ứng rê chuột trong CSS

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

css-code-1

8 Cách viết CSS chuẩn, dễ đọc và tối ưu

Nói tới xây dựng giao diện phía Front-end không thể thiếu CSS. Ngôn ngữ được sử dụng phổ biến để sắp xếp bố cục các phần tử…

Thuộc tính text-shadow trong CSS

Trong những lúc rảnh rỗi mình thường hay nghịch ngợm một vài thứ hay ho tìm thấy trên internet. Đối với CSS thì text-shadow cũng là thuộc…

Thuộc tính Overflow trong CSS

Khi thiết kế web với HTML và CSS đôi khi chúng ta sẽ gặp phải tình trạng văn bản (text) bị tràn ra khỏi phần tử HTML…