3

kurs

css

Lekcja 18: Transform

css

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); }
.box2 { transform: skew(-45deg,10deg); }
Przykład

box1

box2

Prefixy

Do poprawnej obsługi funkcji właściwości transform przez różne przeglądarki należy dodać prefiksy.

selektor {
-webkit-transform: wartość;
-moz-transform: wartość;
-o-transform: wartość;
transform: wartość;
}
comments powered by Disqus

Do góry