CSS3 Konversi 3D

Mentransformasi 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:

2D memutar

3D memutar

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.

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

rotateY () metode, yang unsur-unsur di sekitar angka yang diberikan derajat rotasi di sumbu Y.

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

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.