Rumah > Artikel > hujung hadapan web > Menggunakan fungsi transformasi 3D CSS3
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> 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!