#1 Transform
Vlastnost transform (česky transformace) manipuluje s prvkem pouze na viditelné úrovni, v 2D i 3D prostoru, přičemž neovlivňuje strukturu ani rozložení stránky.
Vlastnost transform může obsahovat funkce nebo některá klíčová slova – ty mohou s prvkem rotovat, ohýbat ho, posouvat apod.
#2 Hodnoty vlastnosti transform
| Hodnota | Popis |
|---|---|
| none | Žádná transformace |
| matrix(n, n, n, n, n, n) | 2D transformace pomocí šesti-hodnotové matice |
| matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) | 3D transformace pomocí šestnácti-hodnotové matice |
| translate(x, y) | Základní 2D transformace na osách X a Y |
| translate3d(x, y, z) | Základní 3D transformace na osách X, Y a Z |
| translateX(x) | Pohyb na ose X |
| translateY(y) | Pohyb na ose Y |
| translateZ(z) | Pohyb na ose Z |
| scale(x, y) | Změna měřítka (velikosti) prvku na osách X a Y |
| scale3d(x, y, z) | Změna měřítka (velikosti) prvku na osách X, Y a Z |
| scaleX(x) | Změna měřítka prvku na ose X |
| scaleY(y) | Změna měřítka prvku na ose Y |
| scaleZ(z) | Změna měřítka prvku na ose Z |
| rotate(x, y) | 2D rotace prvku |
| rotate3d(x, y, z) | 3D rotace prvku |
| rotateX(x) | Rotace prvku na ose X |
| rotateY(y) | Rotace prvku na ose Y |
| rotateZ(z) | Rotace prvku na ose Z |
| skew(x, y) | Zkreslení prvku na osách X a Y |
| skewX(x) | Zkreslení prvku na ose X |
| skewY(y) | Zkreslení prvku na ose Y |
| perspective(n) | Perspektiva pro 3D prvek |
| initial | Původní hodnota |
| inherit | Hodnota zděděná z rodiče |
matrix() a matrix3d()
Funkce matrix() a matrix3d() manipulují s prvkem pomocí 6 nebo 16 členné matice.
Funkce matrix() s hodnotami matrix(a, b, c, d, tx, ty) funguje stejně, jako tyto funkce v pořadí – matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).
Funkce matrix3d() je stejná jako matrix3d(scaleX(), skewY(), 0, 0, skewX(), scaleY(), 0, 0, 0, 0, 1, 0, translateX(), translateY(), 0, 1), kde 1 a 0 slouží k nastavení perspektivy.
div {
transform: matrix(1, .5, -3, 2, 100, 150);
}
translateX() a translateY()
Nejpoužívanější transformační funkce, translateX() a translateY() slouží k pohybu 2D prostorem, po osách X a Y. Nijak prvky nezmenšují, neotáčejí… pouze jimi posouvají po těchto osách. Vkládá se do nich kladná nebo záporná číselná hodnota s absolutní nebo relativní jednotkou.
#box1 {
transform: translateX(-200px);
}
#box2 {
transform: translateY(30%);
}
rotate()
Pomocí funkce rotate() lze s prvkem rotovat kolem 360 stupňů do obou stran. Opět se jedná pouze o vizuální transformaci, která nezasahuje do rozložení webu.
Do závorky se jako argument uvádí číselná hodnota s jednotkou deg (stupně), rad (radiány) nebo turn, kde 1turn je jedna otočka rovna 360 stupňům.
#box {
transform: rotate(180deg);
}
scale()
Funkce scale() slouží k optickému zvětšení nebo zmenšení prvku. V doslovném překladu se jedná o měřítko a na podobném principu také funguje. Základní hodnotou je hodnota 1.0, cokoliv vyšší, včetně desetinných čísel prvek zvětší (například 2.4) a cokoliv menší prvek zmenší (například 0.5).
#box1 {
transform: scale(1.8);
}
#box2 {
transform: scale(.5);
}