CSS3 - Chuyển đổi 2d
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.
Bảng sau chứa các giá trị phổ biến được sử dụng trong các phép biến đổi 2D:
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | matrix(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 | translate(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 | translateY(n) Được sử dụng để biến đổi phần tử cùng với trục y |
| 5 | scale(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ử |
| 7 | scaleY(n) Được sử dụng để thay đổi chiều cao của phần tử |
| số 8 | rotate(angle) Được sử dụng để xoay phần tử dựa trên một góc |
| 9 | skewX(angle) Được sử dụng để xác định các phép biến đổi xiên cùng với trục x |
| 10 | skewY(angle) Được sử dụng để xác định các phép biến đổi xiên cùng với trục y |
Các ví dụ sau đây là mẫu của tất cả các thuộc tính trên.
Xoay 20 độ
Hộp xoay góc 20 độ như hình bên dưới -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Xoay -20 độ
Hộp xoay góc -20 độ như hình bên dưới -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv">
Tutorials point.com
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Xiên trục X
Xoay hộp với trục x xiên như hình dưới đây -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Xiên trục Y
Xoay hộp với trục y xiên như hình dưới đây -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Biến đổi ma trận
Quay hộp với các phép biến đổi Ma trận như hình dưới đây -
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv1">
Tutorials point.com
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Ma trận biến đổi theo hướng khác.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Standard syntax */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "myDiv2">
Tutorials point.com
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau: