Na FreeHostingu Endora běží desítky tisíc webů. Přidejte se ještě dnes!

Vytvořit web zdarma

Na FreeHostingu Endora běží desítky tisíc webů. Přidejte se ještě dnes!

Vytvořit web zdarma
Úvod HTML CSS PHP MySQL JavaScript
2D Transforms

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

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.

   <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
ruka

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

Skew

-->Zkoseno dle parametrů transform: skew(30deg,-5deg);.


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

MATRIX

  .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>  
   
pravy Ascii tabulka
Barvy
Klávesové zkratky


©2013-2021 Trojklik.8u.cz Autor: Vašek D.