Cú pháp và cách sử dụng transform
Cú pháp: transform: giá trị;
Mỗi trình duyệt lại có những thuộc tính transform khác nhau, và khi thiết kế bạn lưu ý phải đưa tất cả các thuộc tính của các trình duyệt vào để tránh lỗi. Bạn có thể sử dụng các thành phần bổ trợ thuộc tính để xác định thành phần đó được hỗ trợ trên trình duyệt nào.
Ví dụ bạn muốn thuộc tính tác động đến đội tượng trong trình duyệt Chrome, Safari, Opera thì thêm vào -webkit- ví dụ như: -webkit-transform: rotate(7deg);, với IE thì là: -ms-transform: rotate(7deg);, và với Firefox thì là -moz-transform: rotate(7deg); và nếu bạn muốn sử trên tất cả thì chỉ cần thuộc tính transform là đủ.
Sử dụng thuộc tính transform tương tự như các thuộc tính khác trong CSS, tuy nhiên khi sử dụng transform bạn phải xác định rõ thành phần tác động cũng như trình duyệt thực thi.
Các giá trị của transform trong CSS
| Giá trị | Ví dụ | Chú thích |
|---|---|---|
none | transform: none; | Không có sự thay đổi |
translate(x,y) | transform: translate(50px,50px); | 2D sử dụng tọa độ X-Y |
translate3d(x,y,z) | transform: translate3d(50px,50px,50px); | 3D sử dụng tọa độ X-Y-Z |
translateX(x) | transform: translateX(-25px); | Dịch chuyển theo trục X |
translateY(y) | transform: translateY(-25px); | Dịch chuyển theo trục Y |
translateZ(z) | transform: translateZ(-25px); | Dịch chuyển theo trục Z |
scaleX(x) | transform: scaleX(1.5); | Biến dạng 2D theo trục X |
scaleY(y) | transform: scaleY(1.5); | Biến dạng 2D theo trục Y |
scaleZ(z) | transform: scaleZ(1.5); | Biến dạng 3D theo trục Z |
scale(x,y) | transform: scale(1.5,1.5); | Biến dạng 2D theo trục X-Y |
scale3d(x,y,z) | transform: scale3d(1.5,1.5,1.5); | Biến dạng 3D theo trục X-Y-Z |
rotate(angle) | transform: rotate(90deg); | Xoay đối tượng, tối đa 360deg |
rotateX(angle) | transform: rotateX(40deg); | Quay 3D theo trục X |
rotateY(angle) | transform: rotateY(40deg); | Quay 3D theo trục Y |
rotateZ(angle) | transform: rotateZ(40deg); | Quay 3D theo trục Z |
skew(x,y) | transform: skew(20deg,20deg); | Nghiêng 2D theo trục X-Y |
skewX(angle) | transform: skewX(10deg); | Nghiêng 2D theo trục X |
skewY(angle) | transform: skewY(10deg); | Nghiêng 2D theo trục Y |
Để 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 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.
