Biến đổi 2D của element với CSS3 (bảng tham khảo đầy đủ)

Bảng tham khảo đầy đủ các hàm transform 2D trong CSS3:

Bảng các hàm transform 2D

STT	Giá trị & Mô tả
1	`matrix(n,n,n,n,n,n)` - Ma trận biến đổi 6 giá trị
2	`translate(x,y)` - Di chuyển theo X, Y
3	`translateX(n)` - Chỉ di chuyển theo X
4	`translateY(n)` - Chỉ di chuyển theo Y
5	`scale(x,y)` - Thay đổi width, height
6	`scaleX(n)` - Chỉ thay đổi width
7	`scaleY(n)` - Chỉ thay đổi height
8	`rotate(angle)` - Xoay element
9	`skew(x-angle, y-angle)` - Nghiêng element
10	`skewX(angle)` - Chỉ nghiêng theo X
11	`skewY(angle)` - Chỉ nghiêng theo Y

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    div {
      width: 100px;
      height: 100px;
      background-color: rgb(255, 17, 0);
      border: 2px solid black;
      margin: 20px;
      display: inline-block;
      color: white;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rotate { transform: rotate(20deg); }
    .translate { transform: translate(30px, 20px); }
    .scale { transform: scale(2, 1); margin-left: 70px; }
    .skew { transform: skew(20deg); }
  </style>
</head>
<body>
  <h1>Biến Đổi 2D Của Element</h1>
  <div class="rotate">ROTATE</div>
  <div class="skew">SKEW</div>
  <div class="scale">SCALE</div>
  <div class="translate">TRANSLATE</div>
</body>
</html>

Lưu ý quan trọng

transform-origin mặc định là center center (trung tâm)
Có thể thay đổi: transform-origin: top left, 0 0, 50% 100%...
Transform không ảnh hưởng layout các element khác (không chiếm diện tích)