Nội dung chính
CSS mang đến cho bạn hàng loạt tính năng để tạo nên một trang web mới mẻ và ấn tượng. Ngoài tô nền (background), tạo bóng đổ (box shadow), tạo đường viền (border), các phần tử trên trang còn có thể thay đổi vị trí, kích thước, cách hiển thị với thuộc tính transform CSS. Trong bài viết này, ITviec sẽ đưa ra những hướng dẫn chi tiết về cách chuyển đổi phần tử 2D và 3D với transform CSS.
Đọc bài viết sau để hiểu rõ:
- Transform CSS là gì
- Hướng dẫn chi tiết các cách chuyển đổi phần tử 2D và 3D với transform CSS
- Những lưu ý cần biết khi áp dụng transform CSS
Transform CSS là gì?
Hai thuộc tính chính được sử dụng để xác định các biến đổi các phần tử gồm transform (các thuộc tính translate, rotate và scale) và transform-origin.
Transform CSS là một tập hợp các thuộc tính trong CSS3 cho phép bạn thay đổi vị trí, hình dạng và xoay các phần tử HTML theo nhiều hướng khác nhau. Từ đó tạo ra các hiệu ứng đẹp mắt và mượt mà mà không cần sử dụng JavaScript. Transform CSS hoạt động bằng cách thay đổi coordinate space của phần tử, thay vì thay đổi vị trí thực tế của phần tử trong tài liệu HTML.
Transform CSS có hai loại chính là transform 2D và transform 3D.
- Transform 2D: Dùng để xử lý các hiệu ứng di chuyển 2D của các phần tử trên website.
- Transform 3D: Cung cấp các tính năng tương tự transform 2D nhưng áp dụng cho không gian 3 chiều để tạo ra các hiệu ứng 3D phức tạp hơn.
Transform-origin là thuộc tính được sử dụng để xác định điểm neo cho các phép biến đổi CSS như xoay, di chuyển và thay đổi tỷ lệ nêu trên. Điểm neo này xác định vị trí trên một phần tử mà phép biến đổi sẽ được áp dụng.
Cú pháp và các giá trị thuộc tính transform CSS
transform: none | transform-functions | initial | inherit;
| Giá trị | Mô tả | Ví dụ |
| none | Phần tử không có sự chuyển đổi |
transform: none;
|
| transform-functions | ||
| matrix(n,n,n,n,n,n) | Xác định phép biến đổi 2D, sử dụng ma trận gồm sáu giá trị. |
transform: matrix(0.586,0.8,-0.8,0.586,40,30);
|
| matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Xác định phép biến đổi 3D, sử dụng ma trận 4×4 gồm 16 giá trị. |
transform: matrix3d( 0.5, 0, -0.866025, 0, 0.595877, 1.2, -1.03209, 0, 0.866025, 0, 0.5, 0, 25.9808, 0, 15, 1);
|
| translate(x,y) | Dịch chuyển phần tử 2D theo trục ngang và dọc. |
transform: translate(50px,100px);
|
| translate3d(x,y,z) | Dịch chuyển phần tử 3D theo trục ngang và dọc. |
transform: translate3d(42px, -62px, -135px);
|
| translateX(x) | Dịch chuyển phần tử 2D theo trục ngang. |
transform: translateX(50px);
|
| translateY(y) | Dịch chuyển phần tử 2D theo trục dọc. |
transform: translateY(100px);
|
| translateZ(z) | Dịch chuyển phần tử theo trục nghiêng. |
transform: translateZ(-3ch);
|
| scale(x,y) | Thay đổi kích thước của phần tử 2D theo chiều ngang và chiều dọc. |
transform: scale(2,2);
|
| scale3d(x,y,z) | Thay đổi kích thước của phần tử 3D theo chiều ngang, chiều dọc và góc xéo. |
transform: scale3d(1.3, 1.3, 1.3);
|
| scaleX(x) | Thay đổi kích thước của phần tử 2D theo chiều ngang. |
transform: scaleX(20deg); và transform: scaleX(-20deg); |
| scaleY(y) | Thay đổi kích thước của phần tử 2D theo chiều dọc. |
transform: scaleY(20deg); và transform: scaleY(-20deg); |
| scaleZ(z) | Thay đổi kích thước của phần tử 2D theo trục Z. |
transform: scaleZ(1);
|
| rotate(angel) | Quay phần tử 2D theo góc được chỉ định trong câu lệnh. |
transform: rotate(10deg);
|
| rotate3d(x,y,z,angle) | Quay phần tử 3D theo góc được chỉ định trong câu lệnh. |
transform: rotate3d(1, 1, 1, 45deg);
|
| rotateX(angle) | Quay phần tử theo góc được chỉ định trên trục X. |
transform: rotateX(45deg);
|
| rotateY(angle) | Quay phần tử theo góc được chỉ định trên trục Y. |
transform: rotateY(45deg);
|
| rotateZ(angle) | Quay phần tử theo góc được chỉ định trên trục Z. |
transform: rotateZ(0deg); và transform: rotateZ(100deg) |
| skew(x-angle,y-angle) | Điều chỉnh độ nghiêng của phần tử theo trục X và trục Y. |
transform: skew(30deg,30deg);
|
| skewX(angle) | Điều chỉnh độ nghiêng của phần tử theo trục X. |
transform: skewX(30deg);
|
| skewY(angle) | Điều chỉnh độ nghiêng của phần tử theo trục Y. |
transform: skewY(30deg);
|
| perspective(n) | Phối cảnh các phương thức transform CSS bên trên. |
perspective: 800px;
|
| initial | Thiết lập thuộc tính về giá trị mặc định. | |
| inherit | Thiết lập thuộc tính theo giá trị của phần tử cha. | |
Cách chuyển đổi phần tử 2D (2D Transform CSS)
Các phép biến đổi CSS hai chiều hoạt động trên trục X (ngang) và Y (dọc).
Transform CSS: Translate
Phương thức translate() dịch chuyển (hoặc di chuyển) một phần tử trang lên, xuống, trái và/hoặc phải trên trang theo khoảng cách được chỉ định. Trong dấu ngoặc đơn, số đầu tiên chỉ định khoảng cách theo chiều ngang, số thứ hai chỉ định khoảng cách theo chiều dọc.
Cú pháp:
transform: translate(x, y);
Trong đó:
- x: Khoảng cách dịch chuyển theo chiều ngang. Giá trị dương di chuyển phần tử sang phải, giá trị âm di chuyển sang trái.
- y: Khoảng cách dịch chuyển theo chiều dọc. Giá trị dương di chuyển phần tử xuống dưới, giá trị âm di chuyển lên trên.
Giá trị x và y có đơn vị mặc định là pixel, nhưng bạn có thể sử dụng các đơn vị khác như em, % hoặc rem.
Ví dụ: Dịch chuyển div của mình theo một số pixel (dương) cụ thể.
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; } #div-1 { background-color: #213343; } #div-2 { transform: translate(100px, 75px); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Div màu cam đã được dịch chuyển sang phải 100 pixel và xuống dưới 75 pixel.
Ví dụ: Dịch chuyển div của mình theo một số pixel(âm) cụ thể.
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; } #div-1 { background-color: #213343; } #div-2 { transform: translate(-100px, -75px); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Phần tử div màu cam sẽ di chuyển sang trái 100 pixel và lên trên 75 pixel.
Bạn cũng có thể sử dụng phần trăm để xác định dịch chuyển. Phần trăm di chuyển phần tử theo khoảng cách ngang tỉ lệ với chiều rộng hoặc khoảng cách dọc tỉ lệ với chiều cao của nó.
Ví dụ: Dịch chuyển div theo tỷ lệ chiều cao và chiều dọc cụ thể.
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; } #div-1 { background-color: #213343; } #div-2 { transform: translate(100%, 50%); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Phần tử div màu cam sẽ dịch chuyển theo 100% chiều rộng và 50% chiều cao.
Ngoài translate(), chúng ta cũng có thể sử dụng các hàm translateX() và translateY(). Trong đó, hàm translateX() chỉ dịch chuyển một phần tử theo chiều ngang và hàm translateY() dịch chuyển một phần tử theo chiều dọc. Cả hai đều chỉ nhận một giá trị đầu vào.
Ví dụ: Dịch chuyển phần tử div theo chiều ngang với translateX().
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; } #div-1 { background-color: #213343; } #div-2 { transform: translateX(100px); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Phần tử div màu cam dịch chuyển sang ngang 100px.
Ví dụ: Dịch chuyển phần tử div theo chiều dọc với translateY().
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; } #div-1 { background-color: #213343; } #div-2 { transform: translateY(100px); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Phần tử div màu cam dịch chuyển sang dọc 100px.
Transform CSS: Scale
Phương thức scale() có chức năng thay đổi kích thước của phần tử mục tiêu. Nếu cung cấp một đối số cho scale(), bạn có thể phóng to hoặc thu nhỏ kích thước của phần tử theo một bội số của kích thước ban đầu.
Cú pháp:
transform: scale(x,y);
Trong đó:
- X: Tỷ lệ thay đổi kích thước theo chiều ngang. Giá trị dương phóng to phần tử, giá trị âm thu nhỏ phần tử.
- Y: Tỷ lệ thay đổi kích thước theo chiều dọc. Giá trị dương phóng to phần tử, giá trị âm thu nhỏ phần tử.
Lưu ý: Giá trị mặc định là 1, nghĩa là không thay đổi kích thước.
Ví dụ: Thay đổi kích thước phần tử div với transform: scale(x,y).
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 100px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: scale(3, 1.5); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Kích thước của div màu cam sẽ tăng lên 3 lần theo chiều ngang và 1.5 lần theo chiều dọc so với ban đầu.
Bạn có thể sử dụng một giá trị cho cả x và y để thay đổi kích thước phần tử theo tỷ lệ đồng đều.
Ví dụ: Thay đổi kích thước phần tử div với transform: scale(2);
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 100px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: scale(2); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Phần tử div sẽ phóng to 2 lần cả chiều ngang và chiều dọc.
Ví dụ: Thay đổi kích thước phần tử div với transform: scale(0.75);
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 100px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: scale(0.75); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Phần tử div sẽ phóng to 0.75 lần cả chiều ngang và chiều dọc.
Bạn cũng có thể sử dụng scaleX() và scaleY() để thay đổi kích thước phần tử. Trong đó, scaleX() thay đổi kích thước phần tử theo chiều ngang, scaleY() thay đổi kích thước phần tử theo chiều dọc.
Ví dụ: Thay đổi kích thước phần tử div với transform: scaleX(2);
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 100px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: scaleX(2); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Phần tử div cam sẽ tăng kích thước gấp 2 lần theo chiều ngang so với ban đầu.
Ví dụ: Thay đổi kích thước phần tử div với transform: scaleY(2);
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 100px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: scaleY(2); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Phần tử div cam sẽ tăng kích thước gấp 2 lần theo chiều dọc so với ban đầu.
Transform CSS: Rotate
Phương thức rotate() dùng để xoay một phần tử trên trang. Theo mặc định, phần tử sẽ xoay quanh tâm của nó. Bạn có thể sử dụng để thay đổi điểm neo cho phép xoay này với thuộc tính transform-origin.
Cú pháp:
transform: rotate(angle);
Trong đó: angle (góc xoay) có thể được xác định bằng độ (degrees), radian (radians) hoặc số vòng xoay (turns). Giá trị dương xoay theo chiều kim đồng hồ, giá trị âm xoay ngược chiều kim đồng hồ.
Ví dụ: Cách thiết lập transform: rotate(angle); cho phần tử div theo 3 đơn vị góc (độ, radian và số vòng quay)
| HTML | CSS |
|
<div id=”container”> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-1″>transformed</div> </div> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-2″>transformed</div> </div> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-3″>transformed</div> </div> </div> |
#transformed-1 { transform: rotate(45deg); } #transformed-2 { transform: rotate(1.2rad); } #transformed-3 { transform: rotate(0.25turn); } .group { display: inline-block; width: 200px; height: 150px; } .original, .transformed { width: 150px; height: 150px; border-radius: 20px; color: #FFFFFF; font-family: Arial; text-align: center; background-color: green; position: absolute; } div { line-height: 150px; } .original { background-color: #213343; } .transformed { background-color: #FF5C35; opacity: 0.8; } #container { top: 25px; left: 25px; position: absolute; } |
Kết quả hiển thị:
Transform CSS: Skew
Phương thức skew() thường được dùng để điều chỉnh độ nghiêng của một phần tử trên trang theo trục X và/hoặc Y. Các giá trị đầu vào lần lượt chỉ định góc nghiêng theo chiều ngang và chiều dọc.
Cú pháp:
transform: skew(x-angle,y-angle);
Trong đó:
- X: Góc nghiêng theo chiều ngang (trục X). Giá trị dương nghiêng phần tử sang phải, giá trị âm nghiêng sang trái.
- Y: Góc nghiêng theo chiều dọc (trục Y). Giá trị dương nghiêng phần tử xuống dưới, giá trị âm nghiêng hướng lên trên.
Ví dụ: Thiết lập phần tử div với transform: skew(50deg, -15deg);
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 50px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: skew(50deg, -15deg); background-color: #FF5C35; opacity: 0.8; } |
Kết quả: Với transform: skew(50deg, -15deg); phần tử div màu cam nghiêng sang phải và hướng lên trên.
Ngoài ra còn có skewX() làm div nghiêng theo trục ngang và skewY() làm nghiêng div theo trục dọc.
Ví dụ: Thiết lập phần tử div nghiêng sang phải theo chiều ngang với transform: skewX(50deg);
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 50px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: skewX(50deg); background-color: #FF5C35; opacity: 0.8; } |
Kết quả:
Ví dụ: Thiết lập phần tử div nghiêng theo chiều dọc với transform: skewY(50deg);
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 50px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: skewY(50deg); background-color: #FF5C35; opacity: 0.8; } |
Kết quả:
Kết hợp các Transform CSS 2D
Nếu muốn áp dụng nhiều phương thức transform CSS cho cùng một bộ chọn, bạn không cần khai báo nhiều thuộc tính transform. Thay vào đó, bạn có thể kết hợp nhiều giá trị thành một khai báo bằng cách liệt kê chúng với khoảng trắng ở giữa mỗi giá trị.
Lưu ý: Trình duyệt sẽ áp dụng các chuyển đổi theo thứ tự được liệt kê từ trái sang phải. Mỗi chuyển đổi sẽ được áp dụng dựa trên kết quả của các chuyển đổi trước đó.
Ví dụ: Thiết lập ba phương thức translate(), scale() và rotate() trong cùng một khai báo.
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; } #div-1 { background-color: #213343; } #div-2 { transform: translate(100px, 20px) scale(0.8) rotate(30deg); background-color: #FF5C35; opacity: 0.8; } |
Kết quả:
Cách chuyển đổi phần tử 3D (3D Transform CSS)
Các phép chuyển đổi CSS ba chiều được thực hiện dựa theo trục Z của trang. Nếu bạn tưởng tượng chiều rộng và chiều cao của màn hình lần lượt là trục X và trục Y thì trục Z là “độ sâu” của màn hình. Giá trị Z càng lớn, phần tử càng có vẻ “gần” hơn với người dùng.
Sau đây là một số cách chuyển đổi các phần tử để tăng thêm chiều sâu cho trang web.
Transform CSS: Perspective
Giá trị perspective() thiết lập độ sâu của phần tử trên trục Z. Nó điều chỉnh cảm giác “gần” hoặc “xa” của phần tử. perspective() được sử dụng kết hợp với các phương thức transform 3D khác.
Transform CSS: rotateX() and rotateY()
Các giá trị rotateX() và rotateY() xoay div “quanh” các trục X và Y.
| HTML | CSS |
|
<div id=”container”> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-1″>transformed</div> </div> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-2″>transformed</div> </div> </div> |
#transformed-1 { transform: rotateX(130deg); } #transformed-2 { transform: rotateY(130deg); } .group { display: inline-block; width: 200px; height: 150px; } .original, .transformed { width: 150px; height: 150px; border-radius: 20px; color: #FFFFFF; font-family: Arial; text-align: center; background-color: green; position: absolute; } div { line-height: 150px; } .original { background-color: #213343; } .transformed { background-color: #FF5C35; opacity: 0.8; } #container { top: 25px; left: 25px; position: absolute; } |
Kết quả hiển thị:
Khi sử dụng các phương thức này với perspective(), phần tử sẽ được điều chỉnh như đang xoay về phía người dùng.
| HTML | CSS |
|
<div id=”container”> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-1″>transformed</div> </div> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-2″>transformed</div> </div> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-3″>transformed</div> </div> </div> |
#transformed-1 { transform: perspective(500px) rotateY(40deg); } #transformed-2 { transform: perspective(500px) rotateY(60deg); } #transformed-3 { transform: perspective(500px) rotateY(80deg); } .group { display: inline-block; width: 200px; height: 150px; } .original, .transformed { width: 150px; height: 150px; border-radius: 20px; color: #FFFFFF; font-family: Arial; text-align: center; background-color: green; position: absolute; } div { line-height: 150px; } .original { background-color: #213343; } .transformed { background-color: #FF5C35; opacity: 0.8; } #container { top: 25px; left: 25px; position: absolute; } |
Kết quả hiển thị:
translateZ
Khi được sử dụng với perspective() , translateZ() tạo ra hiệu ứng di chuyển tiến hoặc lùi trên trục Z của một phần tử. Ví dụ:
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 75px; left: 75px; } #div-1 { background-color: #213343; } #div-2 { transform: perspective(500px) translateZ(200px) ; background-color: #FF5C35; opacity: 0.8; } |
Kết quả hiển thị:
Thuộc tính transform-origin CSS
transform-origin là một thuộc tính CSS khác có thể được sử dụng với transform. Thuộc tính transform-origin thay đổi vị trí của điểm gốc – điểm mà phép biến đổi bắt đầu hoặc xoay quanh đó.
Bạn có thể thấy rõ hiệu ứng của transform-origin nhất với phương thức rotate(). Trong ví dụ sau, ITviec sử dụng transform-origin để di chuyển điểm trung tâm của phép xoay.
| HTML | CSS |
|
<div id=”container”> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-1″>transformed</div> </div> <div class=”group”> <div class=”original”>original</div> <div class=”transformed” id=”transformed-2″>transformed</div> </div> </div> |
#transformed-1 { transform: rotate(45deg); transform-origin: top left; } #transformed-2 { transform: rotate(45deg); transform-origin: bottom left; } .group { display: inline-block; width: 200px; height: 150px; } .original, .transformed { width: 150px; height: 150px; border-radius: 20px; color: #FFFFFF; font-family: Arial; text-align: center; background-color: green; position: absolute; } div { line-height: 150px; } .original { background-color: #213343; } .transformed { background-color: #FF5C35; opacity: 0.8; } #container { top: 100px; left: 125px; position: absolute; } |
Kết quả hiển thị:
Điểm gốc cũng có thể được chỉ định theo khoảng cách pixel từ góc trên cùng bên trái của phần tử gốc, ví dụ:
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; } #div-1 { background-color: #213343; } #div-2 { transform: rotate(45deg); transform-origin: 75px 150px; background-color: #FF5C35; opacity: 0.8; } |
Kết quả hiển thị:
Dưới đây là một ví dụ khác sử dụng thuộc tính transform-origin kết hợp phương thức scale().
| HTML | CSS |
|
<div id=”div-1″>original</div> <div id=”div-2″>transformed</div> |
div { width: 150px; height: 150px; line-height: 150px; border-radius: 20px; position: absolute; color: #FFFFFF; font-family: Arial; text-align: center; top: 100px; left: 100px; } #div-1 { background-color: #213343; } #div-2 { transform: scale(2); transform-origin: 100% 0%; background-color: #FF5C35; opacity: 0.8; } |
Kết quả hiển thị:
Những lưu ý cần biết khi sử dụng transform CSS
Transform tạo ra ngữ cảnh xếp chồng (stacking context)
Nếu bạn đặt thuộc tính transform thành bất kỳ giá trị nào khác ngoài none (không), trình duyệt sẽ tạo ra một ngữ cảnh xếp chồng (stacking context) cho phần tử đó.
Phần tử được biến đổi sẽ hoạt động như một khối chứa (containing block) cho bất kỳ phần tử nào được định vị tuyệt đối (absolute) hoặc cố định (fixed) nằm bên trong nó.
Hoạt ảnh phóng to thu nhỏ gây ra vấn đề về trợ năng
Nếu trang web của bạn có các hoạt ảnh phóng to hoặc thu nhỏ, hãy cung cấp cho người dùng tùy chọn tắt hoạt ảnh. Điều này là bởi các hoạt ảnh phóng to hoặc thu nhỏ có thể gây ra các vấn đề về trợ năng cho người dùng.
Không phải tất cả các phần tử đều có thể áp dụng transform
Bạn không thể áp dụng transform cho các kiểu hộp (box model) sau:
- Các phần tử nội tuyến không thay thế (Non-replaced inline elements). Ví dụ như các thẻ <span> chứa văn bản.
- Các hộp cột bảng (table-column boxes)
- Nhóm cột bảng (table-column-group)
- Sử dụng các trình duyệt tiền tố: Một số trình duyệt cũ hơn có thể yêu cầu sử dụng các trình duyệt tiền tố cho các thuộc tính transform. Ví dụ: -webkit-transform, -moz-transform, -ms-transform, -o-transform.
Các câu hỏi thường gặp về Transform CSS
Transform có ảnh hưởng đến luồng tài liệu hay không?
Bằng cách thay đổi không gian tọa độ (coordinate space), transforms CSS làm thay đổi hình dạng và vị trí của nội dung được áp dụng mà không làm ảnh hưởng đến bố cục tài liệu thông thường (normal document flow).
Có thể thêm nhiều giá trị vào thuộc tính transform không?
Thuộc tính transform có thể nhận nhiều giá trị được áp dụng lần lượt. Nó sẽ áp dụng giá trị ở ngoài cùng bên phải trước và sau đó là các giá trị bên trái, nghĩa là giá trị được liệt kê cuối cùng trong danh sách sẽ được áp dụng đầu tiên.
Tại sao thứ tự của hàm transform lại quan trọng?
Do trình duyệt áp dụng các biến đổi theo thứ tự được khai báo, nên thứ tự bạn liệt kê các hàm sẽ quyết định hiệu ứng cuối cùng. Ngoài ra, thứ tự của các hàm chuyển đổi cũng có thể ảnh hưởng đến hiệu suất. Ví dụ, nếu bạn đang kết hợp nhiều biến đổi phức tạp, việc sắp xếp các biến đổi theo thứ tự hiệu quả nhất có thể giúp cải thiện hiệu suất hiển thị.
Tổng kết
Như vậy trong bài viết này, ITviec đã hướng dẫn bạn những cách sử dụng transform CSS để xoay, di chuyển, thay đổi kích thước và tạo các biến đổi phức tạp cho các phần tử HTML. Hãy thử áp dụng ngay cho trang web của mình để chúng thật ấn tượng nhé.
Tham khảo các bài viết thuộc chủ đề CSS trên ITviec:
- Transition CSS là gì? Phân biệt transition CSS và animation CSS
- Border CSS: Hướng dẫn chi tiết 9 cách sử dụng border CSS
- Box shadow CSS là gì? 7 cách dùng box shadow CSS cơ bản
- Animation CSS: Tổng hợp 11 hiệu ứng Animation CSS phổ biến
- Tailwind CSS: Hướng dẫn 3 cách thiết lập Tailwind chi tiết
- Grid CSS: Cẩm nang sử dụng Grid CSS cơ bản
- Hướng dẫn chi tiết cách dùng 8 thuộc tính background CSS
- Hover CSS: Chi tiết cách tạo Hover CSS và các ví dụ cụ thể
- Overflow CSS là gì? Cách ứng dụng thuộc tính Overflow