CSS przekształcenia 3D
- Poprzednia strona CSS przekształcenia 2D
- Następna strona CSS przejścia
CSS przekształcenia 3D
CSS obsługuje również przekształcenia 3D.
Proszę umieścić kursor myszy nad poniższymi elementami, aby zobaczyć różnice między przekształceniami 2D i 3D:
2D rotate
3D rotate
W tym rozdziale nauczysz się takich atrybutów CSS:
transform
Wsparcie przeglądarki
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.
| Atrybut | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
Metody przekształceń CSS 3D
przez CSS transform Atrybuty, które możesz użyć do przekształceń 3D, to:
rotateX()rotateY()rotateZ()
Metoda rotateX()
rotateX() Metoda obracania elementu o podany kąt wokół osi X:
Przykład
#myDiv {
transform: rotateX(150deg);
}
Metoda rotateY()
rotateY() Metoda obracania elementu o podany kąt wokół osi Y:
Przykład
#myDiv {
transform: rotateY(130deg);
}
Metoda rotateZ()
rotateZ() Metoda obracania elementu o podany kąt wokół osi Z:
Przykład
#myDiv {
transform: rotateZ(90deg);
}
Atrybuty przekształceń CSS
Poniższa tabela wymienia wszystkie atrybuty przekształceń 3D:
| Atrybut | Opis |
|---|---|
| transform | Zastosowanie 2D lub 3D przekształcenia do elementu. |
| transform-origin | Pozwala na zmianę pozycji elementu przekształconego. |
| transform-style | Określenie, jak wstawione elementy są wyświetlane w przestrzeni 3D. |
| perspective | Określenie efektu perspektywy elementu 3D. |
| perspective-origin | Określenie pozycji dolnej części elementu 3D. |
| backface-visibility | Definiowanie, czy element jest widoczny, gdy nie jest zwrócony do ekranu. |
Metody przekształceń CSS 3D
| Funkcja | Opis |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
Definiowanie 3D przekształcenia, używając macierzy 4x4 z 16 wartościami. |
| translate3d(x,y,z) | Definiowanie 3D przekształcenia. |
| translateX(x) | Definiowanie 3D przekształcenia, używając wartości tylko dla osi X. |
| translateY(y) | Definiowanie 3D przekształcenia, używając wartości tylko dla osi Y. |
| translateZ(z) | Definiowanie 3D przekształcenia, używając wartości tylko dla osi Z. |
| scale3d(x,y,z) | Definiowanie 3D skalowania przekształcenia. |
| scaleX(x) | Definiowanie 3D skalowania przekształcenia, poprzez podanie wartości osi X. |
| scaleY(y) | Definiowanie 3D skalowania przekształcenia, poprzez podanie wartości osi Y. |
| scaleZ(z) | Definiowanie 3D skalowania przekształcenia, poprzez podanie wartości osi Z. |
| rotate3d(x,y,z,kąt) | Definiowanie obrotu 3D |
| rotateX(kąt) | Definiowanie obrotu 3D wzdłuż osi X |
| rotateY(kąt) | Definiowanie obrotu 3D wzdłuż osi Y |
| rotateZ(kąt) | Definiowanie obrotu 3D wzdłuż osi Z |
| perspective(n) | Definiowanie perspektywy widoku 3D elementu przekształcanego |
- Poprzednia strona CSS przekształcenia 2D
- Następna strona CSS przejścia
