cari

Rumah >hujung hadapan web >tutorial css >Menggunakan fungsi transformasi 3D CSS3

Menggunakan fungsi transformasi 3D CSS3

王林
王林ke hadapan
2023-09-16 14:33:07927semak imbas

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-

translatez (z) Fungsi penjelmaan Kod di bawah
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

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>

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!

css3
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Apakah itu kelas pseudo CSSArtikel seterusnya：Apakah itu kelas pseudo CSS

Artikel berkaitan

Lihat lagi