Transformacje w CSS3

Plansza interaktywna listopad 2014

URL:
http://www.plotkarka.eu/PI/css3-transforms/
Autor:
Radosław Kowaluk

Właściwości przekształceń

Właściwość transform (złożenie przekształceń)
transform:
none; transform-function [transform-function]*

transform: none;

np. transform: rotate(180deg);

np. transform: rotate(180deg) scaleY(2);

Funkje przekształceń (transform-function)

Funkcje przekształceń 2d
Funkcja Opis
matrix(x1, x2, x3, x4, x5, x6)wektor, macierz transformacji
translate(x[, y])translacja, przesunięcie o wektor [x,y]
translateX(x)translacja, przesunięcie o wektor [x,0]
translateY(y)translacja, przesunięcie o wektor [0,y]
scale(x[, y])skala, jednokładność
scaleX(x)skala, jednokładność pozioma
scaleY(y)skala, jednokładność pionowa
rotate(a)obrót o kąt a
skew(a[, b])pochylenie
skewX(a)pochylenie poziome o kąt a
skewY(b)pochylenie pionowe o kąt b

Właściwości przekształceń

Właściwość transform-origin (środek przekształcenia)
transform-origin:
  percentage np. 50% length np. 50px
percentage np. 50%

Lorem

Lorem

length np. 5px

Lorem

Lorem

Właściwość transform-origin
transform-origin:
  left center right
top

Lorem

Lorem

Lorem

center

Lorem

Lorem

Lorem

bottom

Lorem

Lorem

Lorem

Właściwość transform-style (styl perspektywy)
transform-style:
flat preserve-3d
Rodzic
Dziecko
Rodzic
Dziecko

Funkcje przekształceń

Właściwość perspective (perspektywa)
perspective:
none length np. 10px

Lorem ipsum

Lorem ipsum

Właściwość perspective-origin (początek perspektywy)
perspective-origin:
  percentage length
percentage

Lorem

Lorem

length

Lorem

Lorem

Właściwość perspective-origin
perspective-origin:
  left center right
top

Lorem

Lorem

Lorem

center

Lorem

Lorem

Lorem

bottom

Lorem

Lorem

Lorem

Właściwość backface-visibility (widoczność tylniej strony)
backface-visibility:
visible hidden

Lorem ipsum

Lorem ipsum

Właściwości kolumn

Funkcje przekształceń 3d
Funkcja Opis
matrix(x1, x2, ... , x16)wektor, macierz transformacji
translate3d(x, y, z)translacja, przesunięcie o wektor [x,y,z]
translateZ(x)translacja, przesunięcie o wektor [0,0,z]
scale3d(x, y, z)skala, jednokładność (x,y,z)
scaleZ(z)skala, jednokładność (1, 1, z)
rotate3d(x,y,z,a)obrót o kąt a względem (x,y,z)
rotateX(a)obrót o kąt a względem (1,0,0)
rotateY(a)obrót o kąt a względem (0,1,0)
rotateZ(a)obrót o kąt a względem (0,0,1)
perspective(x)perspektywa o odległości x

Funkcje przekształceń


[transforms CSS3]
CSS Transforms, W3C Working Draft, 26 November 2013, URL: http://www.w3.org/TR/css3-transforms/