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!
tutorial ajax
Bagaimana untuk melihat kod sumber Tomcat
Perkara yang perlu dilakukan jika token log masuk tidak sah
Apakah cara untuk melaksanakan skrip Shell?
Tujuan peringkat
Apakah maksud menyekat semua kuki?
Bagaimana untuk menetapkan bahasa Cina dalam gerhana
Win10 tidak menyokong penyelesaian susun atur cakera perisian tegar Uefi
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
