Transformasi 3D CSS Di CSS, selain transformasi 2D elemen pada halaman, Anda juga dapat melakukan transformasi 3D pada elemen objek (anggap halaman sebagai ruang tiga dimensi untuk memindahkan, memutar, menskalakan dan memiringkan elemen pada halaman, dll. .). Seperti transformasi 2D, transformasi 3D tidak mempengaruhi elemen di sekitarnya dan dapat tumpang tindih dengan elemen lainnya. Namun, elemen yang diubah akan tetap menempati ruang pada posisi defaultnya (sebelum transformasi).
Sistem koordinat tiga dimensi
Mari kita pahami dulu sistem koordinat tiga dimensi. Yang disebut sistem koordinat tiga dimensi menambahkan sumbu z ke sistem koordinat dua dimensi asli, sehingga membentuk ruang tiga dimensi, seperti yang ditunjukkan pada gambar di bawah ini:
①sumbu x: Horizontal ke kanan Catatan: Ruas kanan x bernilai positif dan ruas kiri bernilai negatif
Sumbu ②y: vertikal ke bawah. Catatan: y mempunyai nilai positif di bawah dan nilai negatif di atas.
③Sumbu Z: Layar vertikal Catatan: Nilai positif ke arah luar dan nilai negatif ke arah dalam
Properti konversi
Metode Transformasi 3D
1.terjemahkan3d()
Fungsi Translate3d() digunakan untuk memindahkan posisi suatu elemen dalam ruang 3D. Ciri-ciri transformasi ini adalah menentukan offset elemen pada setiap arah (sumbu X, sumbu Y, sumbu Z) melalui tiga- koordinat vektor dimensi. Format sintaksis fungsinya adalah sebagai berikut:
terjemahkan3d(tx,ty,tz)
Deskripsi parameternya adalah sebagai berikut:
(1) tx: menyatakan jarak pergerakan elemen dalam arah horizontal (sumbu X);
(2) ty: menyatakan jarak perpindahan ke arah vertikal (sumbu Z) elemen;
(3) tz: Menunjukkan jarak pergerakan elemen pada sumbu Z. Nilai persentase tidak dapat digunakan untuk parameter ini.
2. terjemahkanZ()
Fungsi TranslateZ() digunakan untuk memindahkan elemen sepanjang sumbu Z pada sistem koordinat tiga dimensi. Format sintaksis fungsinya adalah sebagai berikut:
terjemahkanZ(tz);
Parameter tz digunakan untuk mengatur jarak pergerakan elemen pada sumbu Z.
Tip: TranslateZ(tz); setara dengan singkatan dari Translate3d(0, 0, tz);.
3.putar3d()
Fungsi memutar3d() digunakan untuk mengatur sudut rotasi elemen sepanjang sumbu X, sumbu Y, atau sumbu Z. Fungsi ini hanya akan memutar elemen sepanjang sumbu tetap dan tidak akan merusak bentuk elemen. Format sintaksis fungsi rotasi3d() adalah sebagai berikut:
putar3d(x,y,z,a)
Deskripsi parameternya adalah sebagai berikut:
x: Mengatur koordinat sumbu X dari sumbu rotasi;
y: Mengatur koordinat sumbu Y dari sumbu rotasi;
z: Mengatur koordinat sumbu Z dari sumbu rotasi;
a: Mengatur sudut rotasi elemen. Sudut positif berarti rotasi searah jarum jam, dan sudut negatif berarti rotasi berlawanan arah jarum jam.
4. skala3d()
Fungsi scale3d() dapat mengubah ukuran (skala) elemen. Format sintaksis fungsinya adalah sebagai berikut:
skala3d(sx,sy,sz)
Deskripsi parameternya adalah sebagai berikut:
sx: mewakili rasio skala elemen pada arah sumbu X;
sy: mewakili rasio skala elemen pada arah sumbu Y;
sz: Menunjukkan rasio skala elemen pada arah sumbu Z.
5.matriks3d()
Fungsi matriks3d() sangat mirip dengan fungsi matriks() yang kita pelajari sebelumnya, namun fungsi matriks3d() dapat menggunakan matriks 4 × 4 untuk menggambarkan transformasi tiga dimensi (3D). Semua operasi konversi 3D dapat dilakukan sekaligus melalui fungsi matriks3d(). Format sintaksis fungsinya adalah sebagai berikut:
matriks3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
Deskripsi parameternya adalah sebagai berikut:
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: digunakan untuk menggambarkan berbagai transformasi 3D;
a4, b4, c4: Menunjukkan jumlah transformasi elemen.
Contoh:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1. 0><title>Dokumen</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*Biarkan subkotak tetap ada ruang 3d Lingkungan*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100%; warna latar belakang: merah muda ;}.boxdiv:anak terakhir{background-color:aquamarine;transform:rotateX(60deg);}</style></head><body><div><div><div></div><div> </div></div></div></tubuh></html>Hasil berjalan:
