2D Transforms

Transformas umožňují přesouvat, otáčet, měnit měřítko a zkosit prvky. Přesouvá jen prvek, vše ostatní zůstane na svém místě.

Metody:

• translate() - Přesune prvek z aktuální pozice podle parametrů.
• rotate() - Otočí prvek ve směru nebo proti směru hodinových ručiček podle daného stupně.
• scaleX() - Zvětšuje nebo zmenšuje šířku prvku.
• scaleY() - Zvyšuje nebo snižuje výšku prvku.
• scale() - Zvětšuje nebo zmenšuje velikost prvku podle uvedených parametrů.
• skewX() - Metoda zkosí prvek podél osy X o daný úhel.
• skewZ() - Metoda zkosí prvek podél osy Y o daný úhel.
• skew() - Metoda zkosí prvek podél osy X a Y o dané úhly.
• matrix() - Metoda kombinuje všechny metody 2D transformace do jedné.

Translate

   <style> 
.div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 3px solid fuchsia;;
  transform: translate(150px,30px); /* Standard syntax */
}
#z5:hover{
 transform: translate(0px,0px);
}
  </style>
...

<div id="z5" class="div">Tento prvek div je posunut o 150 pixelů doprava a o 30 pixelů dolů oproti své aktuální pozici.
 Po najetí myší se přesune na původní pozici.   </div>
 </style>  
     

Rotate

  .pre {
 transform: rotate(-7deg);
}
  

Scale

  #zoomout:hover{
 transform: scale(4,3);
 }
 
 ...
 
 <img id="zoomout" src="... 
 

Skew

Matrix
Parametry jsou následující:matrix (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())

  .div2 {
  width: 400px;
  height:100px;
  background-color: black;
  border: 3px solid red;
  transform: matrix(1, -0.2, 0.1,1.5, 20, 50);
  }
  #matrix:hover{  
  transform: matrix(1, 0, 0,1, 0,0);
  }
  
  ...
  
  <div id="matrix" class="div2">  MATRIX      </div>