CSS 2D transformace

Obsah

    Zobrazit obsah

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:

2D rotate

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á tuto vlastnost plně podporuje.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

CSS 2D transformační metody

S vlastností CSS transform můž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()

Translate

Metoda translate() přesune prvek z jeho aktuální pozice (podle na parametry uvedené pro osu X a osu Y).

Následující příklad přesune prvek <div> o 50 pixelů doprava, a 100 pixelů dolů od své aktuální pozice:

Příklad

div
{
   
transform: translate(50px, 100px);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

Metoda rotate()

Metoda rotate() otočí 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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>

Metoda scale()

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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

Metoda scaleX()

Metoda scaleX() zvyšuje nebo snižuje hodnotu šířka prvku.

Následující příklad zvětší prvek <div> na dvojnásobek jeho původní šířky:

Příklad

div
{
   
transform: scaleX(2);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>

Následující příklad zmenší prvek <div> na polovinu jeho původní šířky:

Příklad

div
{
   
transform: scaleX(0.5);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>

Metoda scaleY()

Metoda scaleY() zvyšuje nebo snižuje hodnotu výška prvku.

Následující příklad zvětší prvek <div> na trojnásobek původní hodnoty výška:

Příklad

div
{
   
transform: scaleY(3);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

Následující příklad zmenšuje prvek <div> na polovinu původního prvku výška:

Příklad

div
{
   
transform: scaleY(0.5);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>

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 Osa X:

Příklad

div
{
   
transform: skewX(20deg);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

Pokud druhý parametr není uveden, 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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

Metoda matrix()

Metoda matrix() kombinuje všechny metody 2D transformace do jedné.

Metoda matrix() má šest parametrů obsahujících matematické funkce, který umožňuje 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);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

Vlastnosti transformace CSS

V následující tabulce jsou uvedeny všechny vlastnosti 2D transformace:

transform

Aplikuje na prvek 2D nebo 3D transformaci

transform-origin

Umožňuje změnit polohu na transformovaných prvcích

CSS 2D transformační metody

matrix(n,n,n,n,n,n)

Definuje 2D transformaci pomocí matice šesti hodnot

translate(x,y)

Definuje 2D posun, pohybem prvku podél osy X a Y

translateX(n)

Definuje 2D posun, pohybem prvku podél osy X

translateY(n)

Definuje 2D posunutí pohybem prvku podél osy Y

scale(x,y)

Definuje transformaci 2D měřítka, mění šířku a výšku prvků

scaleX(n)

Definuje transformaci 2D měřítka a mění šířku prvku

scaleY(n)

Definuje 2D transformaci měřítka a mění výšku prvku

rotate(angle)

Definuje 2D rotaci, úhel je určen v parametru

skew(x-angle,y-angle)

Definuje 2D transformaci zkosení podél osy X a Y

skewX(angle)

Definuje 2D transformaci zkosení podél osy X

skewY(angle)

Definuje 2D transformaci zkosení podél osy Y