2D 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ề 2D 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.
Nội dung chính
2D Transform là gì?
2D Transform là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D.
Cú pháp để tạo transform như sau:
transform: value;
Các giá trị thường được sử dụng là translate(), rotate(), scale(), skewX(), skewY(), matrix(). Cụ thể như sau:
Giá trị | Mô tả |
translate(x,y) | Di chuyển phần tử theo trục x và trục y |
translateX(n) | Di chuyển phần tử theo trục x |
translateY(n) | Di chuyển phần tử theo trục y |
scale(x,y) | Thay đổi độ rộng và chiều cao của phần tử |
scaleX(n) | Thay đổi độ rộng của phần tử |
scaleY(n) | Thay đổi chiều cao của phần tử |
rotate(angle) | Xoay phần tử theo một góc (angle) |
skew(x-angle,y-angle) | Định dạng phần tử nghiêng theo một góc |
skewX(angle) | Định dạng phần tử nghiêng một góc theo trục x |
skewY(angle) | Định dạng phần tử nghiêng một góc theo trục y |
matrix(n,n,n,n,n,n) | Tổng hợp giữa scale, skew và translate |
Transform translate()
Translate() di chuyển một phần tử từ vị trí hiện tại của nó với các tham số đã cho theo trục X và trục Y. X là dịch theo chiều ngang còn Y là dịch theo chiều dọc.
Ví dụ: Di chuyển phần tử <div> sang phải 100 pixel, lui xuống dưới 50 pixel từ vị trí hiện tại
div { -ms-transform: translate(100px,50px); /* IE 9 */ -webkit-transform: translate(100px,50px); /* Safari */ transform: translate(100px,50px);}
Hình gốc :
(*Các ví dụ trong bài viết đều được transform từ hình này)
Hình đã được dịch chuyển:
<!DOCTYPE html><html><head><style> div { width: 300px; height: 100px; background-color: LightSalmon; color: #58257b; border: 3px solid #58257b; -ms-transform: translate(100px,50px); /* IE 9 */ -webkit-transform: translate(100px,50px); /* Safari */ transform: translate(100px,50px); /* Standard syntax */}</style></head><body><div><h2 style="text-align: center">Website Quản Trị Mạng</h2></div></body></html>
Transform rotate()
Rotate() trong Transform CSS sử dụng để xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ theo một góc nhất định, đơn vị sử dụng là degree (deg). Góc dương thì xoay theo chiều kim đồng hồ, góc âm thì người lại.
Ví dụ: Xoay phần tử <div> theo chiều kim đồng hồ 20 deg:
div { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg);}
Code đầy đủ:
<!DOCTYPE html><html><head><style>div { width: 300px; height: 100px; background-color: LightSalmon; color: #58257b; border: 3px solid #58257b;}div#myDiv { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg);}</style></head><body><div> <h2 style="text-align: center">Website Quản Trị Mạng</h2></div><div id="myDiv"> <h2 style="text-align: center">Website Quản Trị Mạng</h2></div></body></html>
Transform scale()
Scale() sử dụng để thay đổi độ rộng và chiều cao của phần tử. Hiểu một cách đơn giản là bạn có thể zoom phần tử to lên hoặc nhỏ lại tùy ý, với x là zoom chiều ngang và y là zoom chiều dọc. Scale không có đơn vị mà tính theo tỉ lệ với phần tử gốc, ví dụ 1 là giữ nguyên 2 là tăng lên gấp đôi, 3 là tăng gấp 3...
Ví dụ: Tăng phần tử <div> lên gấp hai lần chiều rộng và ba lần chiều cao ban đầu của nó
div { -ms-transform: scale(1.5,2); /* IE 9 */ -webkit-transform: scale(1.5,2); /* Safari */ transform: scale(1.5,2);}
Code đầy đủ:
<!DOCTYPE html><html><head><style>div { margin: 90px; width: 300px; height: 100px; background-color: LightSalmon; color: #58257b; border: 3px solid #58257b;}div#myDiv { -ms-transform: scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(1.5,2); /* Standard syntax */}</style></head><body><div><h2 style="text-align: center">Website Quản Trị Mạng</h2></div><div id="myDiv"><h2 style="text-align: center">Website Quản Trị Mạng</h2></div></body></html>
Transform skewX()
SkewX() làm nghiêng một phần tử theo trục X với góc truyền vào.
Ví dụ: Nghiêng phần tử <div> 30 độ theo trục X:
div { -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg);}
skewX(30deg)![]() | skewX(-30deg)![]() |
Transform skewY()
SkewY() làm nghiêng một phần tử theo trục Y với góc truyền vào.
Ví dụ: Nghiêng phần tử <div> 30 độ theo trục Y:
div { -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg);}
skewY(30deg)![]() | skewY(-30deg)![]() |
Transform skew()
Skew() là sự kết hợp của cả skewX và skewY, làm nghiêng một phần tử theo cả trục X và Y với góc truyền vào.
Ví dụ: Nghiêng phần tử <div> 30 độ theo trục X và 10 độ theo trục Y.
div { -ms-transform: skew(30deg, 10deg); /* IE 9 */ -webkit-transform: skew(30deg, 10deg); /* Safari */ transform: skew(30deg, 10deg);}
Code đầy đủ:
<!DOCTYPE html><html><head><style> body {padding-top:50px}div { margin:auto; width: 300px; height: 100px; background-color: LightSalmon; color: #58257b; border: 3px solid #58257b; -ms-transform: skew(20deg, 10deg); /* IE 9 */ -webkit-transform: skew(20deg, 10deg); /* Safari */ transform: skew(30deg, 10deg);}</style></head><body><div><h2 style="text-align: center">Website Quản Trị Mạng</h2></div></body></html>
Nếu tham số thứ hai trong skew() không được chỉ định, chương trình sẽ tự động hiểu số đó là x còn y sẽ có giá trị là 0. Vậy ví dụ sau sẽ nghiêng phần tử <div> 20 độ theo trục X:
div { -ms-transform: skew(20deg); /* IE 9 */ -webkit-transform: skew(20deg); /* Safari */ transform: skew(20deg);}
Transform matrix()
Matrix() là kết hợp của tất cả các phương thức 2D Transform, tổng hợp của scale, skew và translate. Matrix() có sáu tham số, chứa các hàm cho phép bạn xoay, zoom và di chuyển phần tử.
Cú pháp của matrix:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Ví dụ:
div {-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */transform: matrix(1, -0.3, 0, 1, 0, 0);}
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách phân quyền cho người dùng trong MS SQL Server
Hôm qua -
Cách dịch trang web sang tiếng Việt, tiếng Anh hoặc ngôn ngữ bất kỳ
Hôm qua 1 -
Cách khắc phục mã lỗi 0x80004005
Hôm qua -
Cách hiển thị biểu tượng Bluetooth bị thiếu trên Taskbar Windows
Hôm qua -
Sửa lỗi phím tắt Windows + Shift + S không hoạt động trên Windows 10
Hôm qua -
Cách chọn kênh WiFi tốt nhất cho router
Hôm qua -
Hướng dẫn mở rộng ảnh cực đơn giản không cần Photoshop
Hôm qua -
Lên đồ Ashe DTCL mùa 11, đồ Ashe mùa 11 DTCL
Hôm qua -
Spam là gì? Nó được hiểu như thế nào trong Zalo, LoL, Facebook…
Hôm qua -
Toán tử trong SQL
Hôm qua