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);

transform css matrix - itviec blog

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); 

transform css matrix3d - itviec blog

translate(x,y) Dịch chuyển phần tử 2D theo trục ngang và dọc.

transform: translate(50px,100px);

transform css translate - itviec blog

translate3d(x,y,z) Dịch chuyển phần tử 3D theo trục ngang và dọc.

transform: translate3d(42px, -62px, -135px);

transform css translate 3d - itviec blog

translateX(x) Dịch chuyển phần tử 2D theo trục ngang.

transform: translateX(50px);

transform css translatex - itviec blog

translateY(y) Dịch chuyển phần tử 2D theo trục dọc.

transform: translateY(100px);

transform css translatey - itviec blog

translateZ(z) Dịch chuyển phần tử theo trục nghiêng.

transform: translateZ(-3ch);

transform css translatez - itviec blog

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);

transform css scale - itviec blog

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);

transform css scale 3d - itviec blog

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);

Xem source minh hoạ

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);

Xem source minh hoạ

scaleZ(z)  Thay đổi kích thước của phần tử 2D theo trục Z.

transform: scaleZ(1);

transform css scalez - itviec blog

rotate(angel) Quay phần tử 2D theo góc được chỉ định trong câu lệnh.

transform: rotate(10deg);

transform css rotate - itviec blog

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);

transform css rotate 3d - itviec blog

rotateX(angle)  Quay phần tử theo góc được chỉ định trên trục X.

transform: rotateX(45deg);

transform css rotatex - itviec blog

rotateY(angle)  Quay phần tử theo góc được chỉ định trên trục Y.

transform: rotateY(45deg);

transform css rotatey - itviec blog

rotateZ(angle)  Quay phần tử theo góc được chỉ định trên trục Z.

transform: rotateZ(0deg); và

transform: rotateZ(100deg)

Xem source minh hoạ

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);

transform css skew - itviec blog

skewX(angle)  Điều chỉnh độ nghiêng của phần tử theo trục X.

transform: skewX(30deg);

transform css skewx - itviec blog

skewY(angle)  Điều chỉnh độ nghiêng của phần tử theo trục Y.

transform: skewY(30deg);

transform css skewy - itviec blog

perspective(n) Phối cảnh các phương thức transform CSS bên trên.

perspective: 800px;

transform css perspective - itviec blog

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 - itviec blog

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.

Ví dụ cách thiết lập

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: