Atrybut transform w CSS
- poprzednia strona top
- następna strona transform-origin
Definicja i użycie
Atrybut transform aplikuje 2D lub 3D przekształcenia do elementu. Pozwala nam na obracanie, skalowanie, przemieštanie lub pochylanie elementu.
Aby lepiej zrozumieć atrybut transform, sprawdź tenPokaz.
Zobacz również:
Kurs CSS32D przekształcenia CSS3
Kurs CSS33D przekształcenia CSS3
Podręcznik HTML DOMAtrybut transform
Przykład
Obracanie elementu div:
div
{
transform:rotate(7deg);
}
Więcej przykładów znajduje się na dole strony.
Gramatyka CSS
transform: none|funkcje przekształceń;
Wartość atrybutu
| Wartość | Opis | Test |
|---|---|---|
| brak | Definicja braku przekształceń. | Test |
| matrix(n,n,n,n,n,n) | Definicja 2D przekształceń, używając macierzy z sześcioma wartościami. | Test |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Definicja 3D przekształceń, używając macierzy 4x4 z 16 wartościami. | |
| translate(x,y) | Definiowanie przekształcenia 2D. | Test |
| translate3d(x,y,z) | Definiowanie przekształcenia 3D. | |
| translateX(x) | Definiowanie przekształcenia, używając tylko wartości osi X. | Test |
| translateY(y) | Definiowanie przekształcenia, używając tylko wartości osi Y. | Test |
| translateZ(z) | Definiowanie przekształcenia 3D, używając tylko wartości osi Z. | |
| scale(x,y) | Definiowanie przekształcenia skalowania 2D. | Test |
| scale3d(x,y,z) | Definiowanie przekształcenia skalowania 3D. | |
| scaleX(x) | Definiowanie przekształcenia skalowania poprzez ustawienie wartości osi X. | Test |
| scaleY(y) | Definiowanie przekształcenia skalowania poprzez ustawienie wartości osi Y. | Test |
| scaleZ(z) | Definiowanie przekształcenia skalowania 3D poprzez ustawienie wartości osi Z. | |
| rotate(kąt) | Definiowanie obrotu 2D, w parametrach określa się kąt. | Test |
| rotate3d(x,y,z,kąt) | Definiowanie obrotu 3D. | |
| rotateX(kąt) | Definiowanie obrotu 3D wzdłuż osi X. | Test |
| rotateY(kąt) | Definiowanie obrotu 3D wzdłuż osi Y. | Test |
| rotateZ(kąt) | Definiowanie obrotu 3D wzdłuż osi Z. | Test |
| skew(kąt-x,kąt-y) | Definiowanie 2D nachylenia wzdłuż osi X i Y. | Test |
| skewX(kąt) | Definiowanie 2D nachylenia wzdłuż osi X. | Test |
| skewY(kąt) | Definiowanie 2D nachylenia wzdłuż osi Y. | Test |
| perspective(n) | Definiowanie perspektywy widzenia dla elementów przekształceń 3D. | Test |
Szczegóły techniczne
| Domyślna wartość: | brak |
|---|---|
| Inheredność: | nie |
| Wersja: | CSS3 |
| JavaScript syntax: | object.style.transform="rotate(7deg)" |
Więcej przykładów
- Obraz rzucony na stół
- Ten przykład pokazuje, jak utworzyć obraz 'Polaroid' i obrócić go.
Wsparcie przeglądarek
Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.
Liczby z -webkit-、-moz- lub -ms- przedrostkami oznaczają pierwszą wersję używaną z przedrostkiem.
| atrybut | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
- poprzednia strona top
- następna strona transform-origin
