Thuộc tính biến đổi kiểu DOM HTML trả về và áp dụng phép chuyển đổi 2D hoặc 3D cho một phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Quay lại chuyển đổi
object.style.transform
-
Đang sửa đổi chuyển đổi
object.style.transform = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| tên ban đầu | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| không có | Nó không đặt biến đổi. |
| hàm biến đổi | Nó có thể là bất kỳ chức năng chuyển đổi 2D hoặc 3D hợp lệ nào. |
| dọc | Nó đặt chiều cao của phần tử là có thể thay đổi kích thước. |
Chức năng
Đây là các chức năng chuyển đổi 2D hoặc 3D hợp lệ -
| Hàm | Giải thích |
|---|---|
| ma trận (n, n, n, n, n, n) | Nó chỉ định một phép biến đổi 2D sử dụng ma trận gồm 6 giá trị. |
| matrix3d (n, n, n, n, v.v.) | Nó chỉ định một phép biến đổi 3D bằng cách sử dụng ma trận gồm 16 giá trị. |
| dịch (x, y) | Nó chỉ định một bản dịch 2D. |
| translate3d (x, y, z) | Nó chỉ định một bản dịch 3D. |
| translateX (x) | Nó chỉ định một bản dịch chỉ sử dụng giá trị trục X. |
| dịchY (y) | Nó chỉ định một bản dịch chỉ sử dụng giá trị trục Y. |
| translateZ (z) | Nó chỉ định một bản dịch chỉ sử dụng giá trị trục Z. |
| (x, y) | Nó chỉ định tỷ lệ 2D. |
| scale3d (x, y, z) | Nó chỉ định tỷ lệ 3D. |
| scaleX (x) | Nó chỉ định một thang đo chỉ sử dụng giá trị trục X. |
| scaleY (y) | Nó chỉ định một thang đo chỉ sử dụng giá trị trục Y. |
| scaleZ (z) | Nó chỉ định một thang đo chỉ sử dụng giá trị trục Z. |
| xoay (góc) | Nó chỉ định xoay 2D. |
| xoay3d (x, y, z) | Nó chỉ định xoay 3D. |
| xoayX (x) | Nó chỉ định một vòng quay chỉ sử dụng giá trị X. |
| xoayY (y) | Nó chỉ định một vòng xoay chỉ sử dụng giá trị trục Y. |
| xoayZ (z) | Nó chỉ định một vòng xoay chỉ sử dụng giá trị trục Z. |
| xiên (x, y) | Nó chỉ định xiên 2D. |
| xiên quay (x) | Nó chỉ định độ nghiêng chỉ sử dụng giá trị trục X. |
| xiên Y (y) | Nó chỉ định độ nghiêng chỉ sử dụng giá trị trục Y. |
| phối cảnh (n) | Nó chỉ định chế độ xem phối cảnh cho một chuyển đổi 3D. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính biến đổi kiểu HTML DOM -
<!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>DOM Style transform Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Set transform</button>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Đặt biến đổi ”Để áp dụng chuyển đổi 2D trên hộp màu đỏ.
