Transformacje w CSS3

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);
transform: none;	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/