CSS 2D transformace
CSS 2D transformace
Transformace CSS umožňují prvky přesouvat, otáčet, měnit jejich měřítko a zkosit je.
Chcete-li zobrazit 2D transformaci, najeďte myší na prvek níže:
V této kapitole se dozvíte o následující vlastnosti CSS:
transform
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 2D transformační metody
S vlastností CSS transformmůžete použít následující metody 2D transformace:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
Tip: O 3D transformacích se dozvíte v další kapitole.
Metoda translate().
Metoda translate()přesune prvek z jeho aktuální polohy (podle parametrů uvedených pro osu X a osu Y).
Následující příklad přesune prvek <div> o 50 pixelů doprava a o 100 pixelů dolů z jeho aktuální pozice:
Příklad
div
{
transform: translate(50px, 100px);
}
Metoda rotation().
Metoda rotate()otáčí prvek ve směru nebo proti směru hodinových ručiček podle daného stupně.
Následující příklad otočí prvek <div> ve směru hodinových ručiček o 20 stupňů:
Příklad
div
{
transform: rotate(20deg);
}
Použití záporných hodnot otočí prvek proti směru hodinových ručiček.
Následující příklad otočí prvek <div> proti směru hodinových ručiček o 20 stupňů:
Příklad
div
{
transform: rotate(-20deg);
}
Metoda scale().
Metoda scale()zvětšuje nebo zmenšuje velikost prvku (podle parametrů uvedených pro šířku a výšku).
Následující příklad zvětší prvek <div> na dvojnásobek původní šířky a trojnásobek původní výšky:
Příklad
div
{
transform: scale(2, 3);
}
Následující příklad zmenší prvek <div> na polovinu jeho původní šířky a výšky:
Příklad
div
{
transform: scale(0.5, 0.5);
}
Metoda scaleX().
Metoda scaleX()zvětšuje nebo zmenšuje šířku prvku.
Následující příklad zvětší prvek <div> na dvojnásobek jeho původní šířky:
Příklad
div
{
transform: scaleX(2);
}
Následující příklad zmenší prvek <div> na polovinu jeho původní šířky:
Příklad
div
{
transform: scaleX(0.5);
}
Metoda scaleY().
Metoda scaleY()zvyšuje nebo zmenšuje výšku prvku.
Následující příklad zvětší prvek <div> na trojnásobek jeho původní výšky:
Příklad
div
{
transform: scaleY(3);
}
Následující příklad zmenší prvek <div> na polovinu jeho původní výšky:
Příklad
div
{
transform: scaleY(0.5);
}
Metoda skewX().
Metoda skewX()zkosí prvek podél osy X o daný úhel.
Následující příklad zkosí prvek <div> o 20 stupňů podél osy X:
Příklad
div
{
transform: skewX(20deg);
}
Metoda skewY().
Metoda skewY()zkosí prvek podél osy Y o daný úhel.
Následující příklad zkosí prvek <div> o 20 stupňů podél osy Y:
Příklad
div
{
transform: skewY(20deg);
}
Metoda skew().
Metoda skew()zkosí prvek podél os X a Y o dané úhly.
Následující příklad zkosí prvek <div> o 20 stupňů podél osy X a 10 stupňů podél osy Y:
Příklad
div
{
transform: skew(20deg, 10deg);
}
Pokud není druhý parametr zadán, má nulovou hodnotu. Následující příklad tedy zkosí prvek <div> o 20 stupňů podél osy X:
Příklad
div
{
transform: skew(20deg);
}
Metoda matrix().
Metoda matrix()kombinuje všechny metody 2D transformace do jedné.
Metoda matrix() přebírá šest parametrů obsahujících matematické funkce, které umožňují otáčet, měnit měřítko, přesouvat (překládat) a zkosit prvky.
Parametry jsou následující: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Příklad
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Vlastnosti transformace CSS
V následující tabulce jsou uvedeny všechny vlastnosti 2D transformace:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS 2D transformační metody
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |