Các phép biến đổi 2D được sử dụng để thay đổi lại cấu trúc phần tử như dịch, xoay, chia tỷ lệ và xiên.
Sau đây là một số hàm biến đổi 2D -
| Sr.No. | Giá trị &Mô tả |
|---|---|
| 1 | Ma trận (n, n, n, n, n, n) Được sử dụng để xác định các phép biến đổi ma trận với sáu giá trị |
| 2 | dịch (x, y) Được sử dụng để biến đổi phần tử cùng với trục x và trục y |
| 3 | translateX (n) Được sử dụng để biến đổi phần tử cùng với trục x |
| 4 | dịchY (n) Được sử dụng để biến đổi phần tử cùng với trục y |
| 5 | Thang đo (x, y) Được sử dụng để thay đổi chiều rộng và chiều cao của phần tử |
| 6 | scaleX (n) Được sử dụng để thay đổi chiều rộng của phần tử |
Sau đây là đoạn mã hiển thị các hàm chuyển đổi 2D trong CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background-color: rgb(98, 0, 255);
margin: 20px;
display: inline-block;
color: white;
}
.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>2D transform functions</h1>
<div class="rotate">ROTATE</div>
<div class="skew">
SKEW
</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
