Hôm nay mình vừa học về CSS Transforms, và mình rất hào hứng chia sẻ những gì đã khám phá được!
CSS Transform là gì?
Thuộc tính transform trong CSS cho phép bạn thao tác trực quan với các phần tử — bạn có thể di chuyển, xoay, phóng to/thu nhỏ và làm nghiêng chúng mà không thay đổi bố cục thực tế. Điều này cực kỳ hữu ích cho animation, hiệu ứng khi rê chuột (hover) và thiết kế giao diện hiện đại.
Các hàm biến đổi 2D phổ biến
Dưới đây là một số hàm biến đổi 2D phổ biến:
1. translate(x, y)
Di chuyển phần tử khỏi vị trí ban đầu.
transform: translate(50px, 100px);
2. rotate(angle)
Xoay phần tử theo chiều kim đồng hồ.
transform: rotate(45deg);
3. scale(x, y)
Phóng to hoặc thu nhỏ phần tử theo trục X và Y.
transform: scale(1.5, 1.5);
4. skew(x-angle, y-angle)
Làm nghiêng phần tử.
transform: skew(20deg, 10deg);
Các hàm biến đổi 3D
Biến đổi 3D tạo chiều sâu cho phần tử và khiến chúng có cảm giác di chuyển trong không gian 3D. Để hiển thị đúng, bạn thường cần dùng thuộc tính perspective trên phần tử cha.
1. rotateX(angle)
Xoay phần tử quanh trục X.
transform: rotateX(45deg);
2. rotateY(angle)
Xoay phần tử quanh trục Y.
transform: rotateY(45deg);
3. rotateZ(angle)
Xoay phần tử quanh trục Z (giống với rotate trong 2D).
transform: rotateZ(45deg);
4. translateZ(distance)
Di chuyển phần tử tiến gần hoặc lùi xa trong không gian 3D.
transform: translateZ(50px);
5. perspective(n)
Xác định khoảng cách từ người xem đến phần tử 3D.
.parent { perspective: 500px;
}
Ví dụ: Hiệu ứng Hover sử dụng Transform 2D
<style>
.box { width: 100px; height: 100px; background: teal; transition: transform 0.3s;
} .box:hover { transform: scale(1.2) rotate(10deg);
}
</style> <div class="box"></div>
Khi bạn rê chuột vào khối hộp, nó sẽ phóng to và xoay nhẹ — tất cả là nhờ thuộc tính transform!
Lời kết
CSS transforms (2D và 3D) là những công cụ mạnh mẽ giúp thêm tính sáng tạo và tương tác vào thiết kế web của bạn. Mình rất thích việc thử nghiệm các hiệu ứng khác nhau và quan sát các phần tử di chuyển, xoay ngay trên màn hình.
Tiếp theo, mình dự định sẽ học về CSS animations và cách chúng kết hợp với transforms để tạo ra các hiệu ứng sống động hơn.