Các chức năng biến đổi 2D được sử dụng để áp dụng các phép biến đổi 2D có thể xoay, di chuyển, chia tỷ lệ và xiên cho một phần tử.
-
Dịch - Để di chuyển một phần tử dọc theo trục x và y.
-
Quy mô - Để thay đổi kích thước phần tử theo hướng x y.
-
Xoay vòng - Để di chuyển phần tử xung quanh một số mức độ.
-
Skew - Để xiên một phần tử theo hướng x y.
Sau đây là đoạn mã hiển thị các hàm chuyển đổi 2D trong CSS -
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, 0, 128);
border:2px solid rgb(0, 35, 150);
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 example</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 -
