Transform umożliwia dokonywanie przekształceń elementu takich jak przesunięcie, obrót, skalowanie, pochylenie. Poniżej opis funkcji właściwości transform.
Translate – przesunięcie
- translateX(x) – przesunięcie w poziomie
- translateY(y) – przesunięcie w pionie
- translate(x,y) – przesunięcie w poziomie i pionie
- translateZ(z) – przesunięcie w względem osi z – prostopadłej do 0X,0Y
- translate3d(x,y,z) – przesunięcie w trzech wymiarach
selektor { transform: translate(x,y); }
W poniższym przykładzie kwadrat żółty zostanie przesunięty o 160px w prawo i 50px w dół względem zielonego.
.box2 { transform: translate(160px,50px); }
Przykład
box1
box2
Rotate – obrót
- rotate(a) – obrót względem punktu 0 (centralny punkt elementu)
- rotate(x) – obrót wokół osi X
- rotate(y) – obrót wokół osi Y
- rotate(z) – obrót względem osi z – prostopadłej do 0X,0Y
- rotate3d(x,y,z) – obrót w trzech wymiarach
selektor { transform: rotate(a); }
W poniższym przykładzie kwadrat żółty zostanie obrócony o 45 stopni w prawo względem zielonego.
.box2 { transform: rotate(45deg); }
Przykład
box1
box2
Scale – zmiana rozmiarów
- scaleX(x) – zmiana szerokości elementu
- scaleY(y) – zmiana wysokości elementu
- scale(x,y) – zmiana szerokości i wysokości
- scale(z) – zmiana szerokości i wysokości względem osi z – prostopadłej do 0X,0Y
- scale(x,y,z) – zmiana szerokości i wysokości w trzech wymiarach
selektor { transform: scale(x,y); }
W poniższym przykładzie kwadrat żółty zostanie zmniejszony względem zielonego.
.box2 { transform: scale(0.5,0.5); }
Przykład
box1
box2
Skew – pochylenie
selektor { transform: skew(x,y); }
W poniższym przykładzie kwadrat żółty zostanie pochylony względem zielonego.
.box2 { transform: skew(-45deg,10deg); }
Przykład
box1
box2
Perspective – perspektywa
selektor { transform: perspective(a); }
W poniższym przykładzie funkcję perspective połączymy z funkcją rotate.
.box2 { transform: perspective(150px) rotateY(-40deg); }
Przykład
box1
box2
Matrix – połączenie parametrów
selektor { transform: matrix(scalX, SkewY, SkewX, scalY, translateX, translateY); }
W naszym przykładzie będzie to wyglądać następująco:
.box2 { transform: matrix(0.20,0.5,-0.5,0.20,30,40); }
Przykład
box1
box2