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à mã để chuyển đổi 2D của các phần tử bằng cách sử dụng 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(255, 17, 0);
border:2px solid black;
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 transformation of elements </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
