Transform

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

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

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

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

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

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