CSS3 3D Konwersja

Transformacje 3D

CSS3 pozwala używać 3D formatowania elementu konwersji.

W tym rozdziale dowiesz się, niektóre z metod konwersji 3D:

Kliknij na następujące elementy, aby zobaczyć różnicę między 2D i 3D konwersji konwersji pomiędzy:

2D obracaj

Obrót 3D

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.

Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.

属性
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-

Sposób rotateX (), której elementy wokół danej liczby stopni obrotu na osi x.

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

Sposób rotateY (), której elementy wokół danej liczby stopni obrotu na osi y.

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

Poniższa tabela zawiera wszystkie właściwości transformacji:

nieruchomość	opis	CSS
przekształcać	Stosuje się do elementu 2D lub konwersji 3D.	3
przekształcić-origin	To pozwala na zmianę położenia elementu do konwersji.	3
przekształcenie stylu	Przepis ten był jak zagnieżdżone elementy są wyświetlane w przestrzeni 3D.	3
perspektywa	Przepisy 3d element Efekt perspektywy.	3
Perspektywa-origin	Ustalona z góry pozycja dolnej elementu 3D.	3
tylna widoczności	Definiowanie elementów, gdy nie jest w obliczu ekranie jest widoczny.	3

funkcja	opis
Matrix3D (N, N, N,N, N, N, N, N, N, N,N, N, N, N, N, N)	Konwersja 3D zdefiniowane za pomocą 16 wartości macierzy 4x4.
translate3d(x, y, z)	Zdefiniowane transformacji 3D.
translateX(x)	Definiowanie konwersji 3D, używając tylko wartości dla osi X.
translateY(y)	Określić konwersji 3D, wykorzystując jedynie wartości Y osi.
translateZ(Z)	Definiowanie konwersji 3D, używając tylko wartości dla osi Z.
scale3d(x, y, z)	Określ skalę transformacji 3D.
scaleX(x)	Transformacja skali 3D określone przez daną wartość X osi.
scaleY(y)	Transformacja skali 3D określone przez daną wartość Y osi.
scaleZ(Z)	Transformacja skali 3D określone przez daną wartość osi Z.
rotate3d (x, y, z,kąt)	Określ obrót 3D.
rotateX(kąt)	Zdefiniowane wzdłuż osi obrotu X 3D.
rotateY(kąt)	Zdefiniowane wzdłuż osi obrotu Y 3D.
rotateZ(kąt)	Zdefiniowane wzdłuż osi obrotu Z 3D.
perspektywy(n)	3D przedstawia widok perspektywiczny definicji elementu konwersji.