CSS3: Transform

Con CSS3, y sin una sola línea JavaScript, puedes inclinar, escalar, mover e incluso voltear los elementos de una página Web. CSS3 te permite el control sobre muchos aspectos de la apariencia de un elemento. Con la combinación de varios de ellos podemos crear efectos muy interesantes. Además podemos añadir transiciones suaves que realzan dichos efectos.

rotate

Características:

  • Se utiliza para hacer girar elementos
  • El elemento gira hacia la derecha con ángulos positivos y en sentido contrario a las agujas del reloj para ángulos negativos
  • Sintaxis: 
    -webkit-transform: rotate(25deg);
   -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
     -o-transform: rotate(25deg);
        transform: rotate(25deg);
  • Vista:

Ejemplo:

scale

Características:

  • Se utiliza para aumentar o reducir elementos
  • El elemento aumenta para valores mayores a 1 y se reduce para valores entre 0 y 1
  • Un valor de 2 (sin unidades) significa el doble de tamaño. Un valor de 0.5 significa la mitad del tamaño del elemento
  • Un solo valor indica aumento/disminución tanto en ancho (eje X) como en alto (eje Y)
  • Un segundo valor [opcional], separado por una coma, permite valores distintos para ancho y alto.
  • Sintaxis: 
    -webkit-transform: scale(1.3);
   -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
     -o-transform: scale(1.3);
        transform: scale(1.3);
  • Vista:

Ejemplo:

translate

Características:

  • Se utiliza para mover elementos
  • El origen de la transformación está en el centro del elemento
  • El elemento se mueve 25px a la derecha. Los valores negativos representan movimiento a la izquierda.
  • Un segundo parámetro [opcional], separado por una coma, mueve el elemento hacia abajo con valores positivos y hacia arrriba con valores negativos
  • Sintaxis: 
    -webkit-transform: translate(25px,100px);
   -moz-transform: translate(25px,100px);
    -ms-transform: translate(25px,100px);
     -o-transform: translate(25px,100px);
        transform: translate(25px,100px);
  • Vista:

Ejemplo:

skew

Características:

  • Se utiliza para inclinar elementos
  • El origen de la transformación está en el centro del elemento
  • El elemento se inclina alrededor del eje x (horizontal) 25 grados. Los valores positivos representan una inclinación a la izquierda, los valores negativos inclinan el elemento a la derecha.
  • Se puede utilizar un segundo parámetro [opcional], separado por coma, que es el ángulo de inclinación alrededor del eje Y (vertical). Los valores positivos inclinan el elemento hacia abajo y viceversa.
  • Sintaxis: 
    -webkit-transform: skew(25deg);
   -moz-transform: skew(25deg);
    -ms-transform: skew(25deg);
     -o-transform: skew(25deg);
        transform: skew(25deg);
  • Vista:

Ejemplo:

closed