Tutorial CSS3 Konversi 3D Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Mentransformasi 3D,Dukungan Browser,rotateX () metode,contoh,rotateY () metode,contoh,properti konversi,metode konversi 3D,
CSS3 memungkinkan Anda untuk menggunakan 3D untuk memformat elemen konversi.
Dalam bab ini, Anda akan belajar beberapa metode konversi 3D:
Klik pada elemen berikut untuk melihat perbedaan antara 2D dan Konversi Konversi 3D antara:
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.
属性 | |||||
---|---|---|---|---|---|
transform | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
transform-style | 36.0 12.0 -webkit- |
11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
perspective | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
backface-visibility | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
rotateX () metode, yang unsur-unsur di sekitar angka yang diberikan derajat rotasi di X-axis.
rotateY () metode, yang unsur-unsur di sekitar angka yang diberikan derajat rotasi di sumbu Y.
Tabel berikut ini berisi semua sifat-sifat transformasi:
milik | deskripsi | CSS |
---|---|---|
mengubah | Diterapkan pada 2D elemen atau konversi 3D. | 3 |
mengubah-asal | Hal ini memungkinkan Anda untuk mengubah posisi elemen yang akan dikonversi. | 3 |
mengubah gaya | Penyediaan adalah bagaimana elemen bersarang ditampilkan dalam ruang 3D. | 3 |
perspektif | Ketentuan 3D unsur efek perspektif. | 3 |
perspektif-asal | Sebuah posisi yang telah ditentukan dari bagian bawah elemen 3D. | 3 |
backface-visibilitas | Mendefinisikan elemen ketika tidak dalam menghadapi layar terlihat. | 3 |
fungsi | deskripsi |
---|---|
matrix3d (n, n, n,n, n, n, n, n, n, n,n, n, n, n, n, n) | konversi 3D didefinisikan menggunakan 16 nilai 4x4 matrix. |
translate3d(x, y, z) | Didefinisikan transformasi 3D. |
translateX(x) | Mendefinisikan konversi 3D, hanya menggunakan nilai-nilai untuk sumbu X. |
translateY(y) | Mendefinisikan konversi 3D, hanya menggunakan nilai-nilai untuk Y-axis. |
translateZ(z) | Mendefinisikan konversi 3D, hanya menggunakan nilai-nilai untuk Z sumbu. |
scale3d(x, y, z) | Mendefinisikan transformasi skala 3D. |
scaleX(x) | transformasi skala 3D didefinisikan oleh nilai yang diberikan dari X-axis. |
ScaleY(y) | transformasi skala 3D didefinisikan oleh nilai yang diberikan dari Y-axis. |
scaleZ(z) | transformasi skala 3D didefinisikan oleh nilai yang diberikan dari Z sumbu. |
rotate3d (x, y, z,angle) | Mendefinisikan rotasi 3D. |
rotateX(angle) | Ditetapkan di sepanjang rotasi sumbu X 3D. |
rotateY(angle) | Ditetapkan di sepanjang rotasi Y axis 3D. |
rotateZ(angle) | Ditetapkan di sepanjang rotasi Z sumbu 3D. |
perspektif(n) | perspektif 3D dari definisi elemen konversi. |