Kategorie
Kurs CSS

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

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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *