CSS3 - Chuyển đổi 3D
Sử dụng với các phép biến đổi 3d, chúng ta có thể di chuyển phần tử sang trục x, trục y và trục z, Ví dụ dưới đây chỉ rõ cách phần tử sẽ xoay.
Phương pháp biến đổi 3D
Các phương pháp dưới đây được sử dụng để gọi các phép biến đổi 3D:
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Được sử dụng để biến đổi phần tử bằng cách sử dụng 16 giá trị của ma trận |
| 2 | translate3d(x,y,z) Được sử dụng để biến đổi phần tử bằng cách sử dụng trục x, trục y và trục z |
| 3 | translateX(x) Được sử dụng để chuyển đổi phần tử bằng cách sử dụng trục x |
| 4 | translateY(y) Được sử dụng để chuyển đổi phần tử bằng cách sử dụng trục y |
| 5 | translateZ(z) Được sử dụng để chuyển đổi phần tử bằng cách sử dụng trục y |
| 6 | scaleX(x) Được sử dụng để thay đổi tỷ lệ phần tử bằng cách sử dụng trục x |
| 7 | scaleY(y) Được sử dụng để thay đổi tỷ lệ phần tử bằng cách sử dụng trục y |
| số 8 | scaleY(y) Được sử dụng để biến đổi phần tử bằng cách sử dụng trục z |
| 9 | rotateX(angle) Được sử dụng để xoay các biến đổi phần tử bằng cách sử dụng trục x |
| 10 | rotateY(angle) Được sử dụng để xoay các biến đổi phần tử bằng cách sử dụng trục y |
| 11 | rotateZ(angle) Được sử dụng để xoay các biến đổi phần tử bằng cách sử dụng trục z |
Chuyển đổi 3D trục X
Ví dụ sau đây cho thấy các chuyển đổi 3D trục x.
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate X-axis</p>
<div id = "myDiv">
tutorials point.com.
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Chuyển đổi 3D trục Y
Ví dụ sau đây cho thấy các chuyển đổi 3D trục y:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>Rotate Y axis</p>
<div id = "yDiv">
tutorials point.com.
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Chuyển đổi 3D trục Z
Ví dụ sau đây cho thấy các phép biến đổi 3D trục Z:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
</style>
</head>
<body>
<div>
tutorials point.com
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
tutorials point.com.
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau: