Menggunakan penjelmaan 3d, kita boleh memindahkan elemen ke paksi-x, paksi-y dan paksi-z. Berikut adalah beberapa kaedah transformasi 3D CSS3-
Kaedah berikut digunakan untuk memanggil transformasi 3D-
| Sr n,n,n,n,n,n,n,n,n,n ,n,n) | digunakan untuk mengubah elemen menggunakan 16 nilai matriks |
|---|---|
| 2 | translate3d( x,y,z) digunakan untuk mengubah elemen menggunakan paksi x, paksi y dan paksi z |
| 3 | translateX(x) digunakan untuk mengubah elemen menggunakan paksi x |
| 4 ETranslatey (y) gunakan paksi Y (y) elemen |
5 |
| untuk kegunaan elemen penukar paksi Y | Fungsi penjelmaan Kod |
| Kod CSS3 | Demonstrasi Langsung <!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>Salin selepas log masuk Output Kod di atas akan menghasilkan output berikut - |
Atas ialah kandungan terperinci Menggunakan fungsi transformasi 3D CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
