Najlepszy samouczek CSS3 3D Konwersja W 2024 r. W tym samouczku możesz dowiedzieć się Transformacje 3D,Pomoc Browser,Metoda rotateX (),Przykłady,Metoda rotateY (),Przykłady,Mienie konwersyjne,metoda konwersji 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:
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.
Sposób rotateY (), której elementy wokół danej liczby stopni obrotu na osi y.
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. |