51. 2D Transform Trong CSS

2D Transform trong CSS: 2D transforms cho phép bạn biến đổi và di chuyển các phần tử trên một mặt phẳng 2D. Các biến đổi này bao gồm dịch chuyển (translate), xoay (rotate), co giãn (scale), và nhiều hiệu ứng khác. Dưới đây là một số ví dụ về cách sử dụng các 2D transforms trong CSS:

Dịch chuyển (Translate):

css

.translated-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(50px, 20px);
}

Trong ví dụ này, hộp sẽ được dịch chuyển sang phải 50px và xuống 20px.

Xoay (Rotate):

css

.rotated-box {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotate(45deg);
}

Hộp trong ví dụ này sẽ bị xoay 45 độ theo chiều kim đồng hồ.

Co giãn (Scale):

css

.scaled-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(1.5);
}

Hộp trong ví dụ này sẽ bị co giãn gấp đôi (scale 1.5 lần) theo cả hai chiều.

Kết hợp nhiều biến đổi:

css

.combined-transforms {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: translate(30px, 30px) rotate(20deg) scale(1.2);
}

Trong ví dụ này, hộp sẽ được dịch chuyển, xoay và co giãn đồng thời.

Gốc biến đổi (Transform Origin):

css

.transform-origin-box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transform: rotate(30deg);
  transform-origin: bottom right;
}

Hộp trong ví dụ này sẽ bị xoay 30 độ, và điểm gốc của biến đổi là góc dưới bên phải.

Lưu ý rằng các ví dụ trên chỉ minh họa cách sử dụng các transform cơ bản. Bạn có thể tùy chỉnh các giá trị và kết hợp chúng để tạo ra các hiệu ứng độc đáo và phức tạp hơn.

Leave a Comment Cancel Reply