Thuộc tính style.transform trong HTML DOM cho phép lấy hoặc áp dụng các phép biến đổi 2D hoặc 3D (xoay, tỷ lệ, dịch chuyển, nghiêng) lên một phần tử HTML.
Cú pháp
Lấy giá trị transform
object.style.transform
Thiết lập giá trị transform
object.style.transform = "giá_trị"
Các giá trị hợp lệ
| Giá trị | Mô tả |
|---|---|
| inherit | Kế thừa từ phần tử cha. |
| initial | Đặt về giá trị mặc định. |
| none | Không áp dụng biến đổi nào. |
| transform-function | Một hoặc nhiều hàm biến đổi hợp lệ (xem danh sách bên dưới). |
| vertical | (Lưu ý: giá trị này không chuẩn cho transform, có thể là lỗi tài liệu gốc) |
Các hàm biến đổi (Transform Functions)
| Hàm | Mô tả |
|---|---|
| matrix(n,n,n,n,n,n) | Biến đổi 2D bằng ma trận 6 giá trị. |
| matrix3d(n,n,n,n,...) | Biến đổi 3D bằng ma trận 16 giá trị. |
| translate(x,y) | Dịch chuyển 2D. |
| translate3d(x,y,z) | Dịch chuyển 3D. |
| translateX(x) | Dịch chuyển theo trục X. |
| translateY(y) | Dịch chuyển theo trục Y. |
| translateZ(z) | Dịch chuyển theo trục Z. |
| scale(x,y) | Tỷ lệ 2D. |
| scale3d(x,y,z) | Tỷ lệ 3D. |
| scaleX(x) | Tỷ lệ theo trục X. |
| scaleY(y) | Tỷ lệ theo trục Y. |
| scaleZ(z) | Tỷ lệ theo trục Z. |
| rotate(angle) | Xoay 2D. |
| rotate3d(x,y,z,angle) | Xoay 3D. |
| rotateX(angle) | Xoay quanh trục X. |
| rotateY(angle) | Xoay quanh trục Y. |
| rotateZ(angle) | Xoay quanh trục Z. |
| skew(x,y) | Nghiêng 2D. |
| skewX(angle) | Nghiêng theo trục X. |
| skewY(angle) | Nghiêng theo trục Y. |
| perspective(n) | Chiều sâu phối cảnh cho 3D. |
Ví dụ minh họa
Áp dụng dịch chuyển và xoay cho hộp đỏ khi nhấn nút:
<!DOCTYPE html>
<html>
<head>
<style>
body { color: #000; background: lightblue; height: 100vh; text-align: center; }
.box { background: lightcoral; width: 200px; height: 200px; margin: 2rem auto; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính transform</h1>
<div class="box"></div>
<button onclick="add()" class="btn">Áp dụng transform</button>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
}
</script>
</body>
</html>
Kết quả
Nhấn nút "Áp dụng transform" để hộp đỏ dịch chuyển 10px theo cả hai trục và xoay 10 độ.