Atrybut transform style

Definicja i zastosowanie

transform Atrybut应用2D lub 3D transformacje do elementu. Ten atrybut pozwala na obrót, skalowanie, przesunięcie, nachylenie i inne operacje na elemencie.

Zobacz również:

Przeglądarka CSS:Atrybut transformacji

Przykład

Obrót elementem div:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Spróbuj sam

Gramatyka

Zwrócenie atrybutu transformacji:

object.style.transform

Ustawienie atrybutu transformacji:

object.style.transform = "none|transform-functions|initial|inherit"

Wartość atrybutu

Wartość Opis
none Definiuje przekształcenie bez zmian.
matrix(n, n, n, n, n, n) Używa macierzy z sześcioma wartościami do zdefiniowania przekształcenia dwuwymiarowego.
matrix3d(n, n, n, n, itp...) Używa macierzy 4x4 z 16 wartości do zdefiniowania przekształcenia 3D.
translate(x, y) Definiuje translację 2D.
translate3d(x, y, z) Definiuje 3D translację.
translateX(x) Definiuje translację, używając wartości osi X.
translateY(y) Definiuje translację, używając wartości osi Y.
translateZ(z) Definiuje 3D translację, używając wartości osi Z.
scale(x, y) Definiuje skalowanie 2D.
scale3d(x, y, z) Definiuje 3D skalowanie.
scaleX(x) Definiuje skalowanie, ustawiając wartość dla osi X.
scaleY(y) Definiuje skalowanie, ustawiając wartość dla osi Y.
scaleZ(z) Definiuje 3D skalowanie, ustawiając wartość dla osi Z.
rotate(kąt) Definiuje obrót 2D, określając kąt w parametrach.
rotate3d(x, y, z, kąt) Definiuje 3D obrót.
rotateX(kąt) Definiuje 3D obrót wzdłuż osi X.
rotateY(kąt) Definiuje 3D obrót wzdłuż osi Y.
rotateZ(kąt) Definiuje 3D obrót wzdłuż osi Z.
skew(kąt-x, kąt-y) Definiuje 2D nachylenie wzdłuż osi X i Y.
skewX(kąt) Definiuje 2D nachylenie wzdłuż osi X.
skewY(kąt) Definiuje 2D nachylenie wzdłuż osi Y.
perspective(n) Definiuje perspektywę elementu 3D.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Inherbuje tę właściwość od elementu nadrzędnego. Zobacz inherit.

Szczegóły techniczne

Domyślna wartość: Brak
Wartość zwracana: Ciąg znaków, który reprezentuje Atrybut transformacji.
Wersja CSS: CSS3

Obsługa przeglądarki

Liczby w tabeli wskazują na wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0