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. Sau đây là một số phương pháp của CSS3 3D Transform -
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 | dịchY (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 |
Sau đây là mã cho các chức năng biến đổi 3D CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin-left: 20px;
}
.rotateX {
width: 100%;
height: 100%;
background: rgb(52, 0, 241);
transform: perspective(600px) rotateX(85deg);
}
.rotateY {
width: 100%;
height: 100%;
background: rgb(55, 0, 255);
transform: perspective(600px) rotateY(75deg);
}
.translateZ{
width: 100%;
height: 100%;
background: rgb(55, 0, 255);
transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
