Transformaciones CSS

Con las transformaciones 2D de CSS3 podemos mover ( translate ) redimensionar ( scale ) girar ( rotate ) y sesgar ( skew ) los elementos HTML.

elemento { transform: none | funciones de transformación | initial | inherit;}

Algunas funciones de transformación:

Transformaciones	Descripción
none	Establece que no habrá transformación alguna.
translate(x,y)	Traslada o mueve un elemento a lo largo de los ejes horizontal ( x ) y vertical ( y )
translateX(x)	Traslada o mueve un elemento solo a lo largo del eje horizontal ( x )
translateY(y)	Traslada o mueve un elemento solo a lo largo del eje vertical ( y )
scale(x,y)	Redimensiona un elemento 2D
scaleX(x)	Redimensiona un elemento solo a lo largo de su eje horizontal ( x )
scaleY(y)	Redimensiona un elemento solo a lo largo de su eje vertical ( y )
skew(ax,ay)	Sesga un elemento a lo largo de sus dos ejes
skewX(ax)	Sesga un elemento a lo largo del eje X (horizontal), donde `ax` es el ángulo de deformación.
skewY(ay)	Sesga un elemento a lo largo del eje X (vertical), donde `ay` es el ángulo de deformación.
rotate(a)	Define una rotation 2D, donde a es el ángulo ( en grados hexagesimales ), donde `a` es el ángulo de rotación.
rotateX(angle)	Define una rotación a lo largo del eje X ( horizontal )
rotateY(a)	Define una rotación a lo largo del eje X ( vertical )
matrix(n,n,n,n,n,n)	Define una transformación 2D, utilizando una matriz de 6 valores.
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Define una transformación 3D, utilizando una matriz de 4x4 = 16 valores.
initial	Sets this property to its default value. Read about initial
inherit	Hereda this property from its parent element. Read about inherit

Trasladar con translate

Para trasladar elementos en el CSS3 utilizamos el método translate(), o los métodos de desglose translateX() y translateY(). En el siguiente ejemplo el centro del elemento .translate cambia su posición 100px hacia la derecha y 50px hacia abajo.

.translate{ transform: translate(100px, 50px)}

Si queremos trasladar el elemento solo hacia la derecha podemos dejar de lado el segundo parámetro y el CSS entenderá que el desplazamiento en y es nulo.

.translate{ transform: translate(100px)}

Podemos expresar lo mismo utilizando el método de desglose translateX que traslada o mueve un elemento solo a lo largo del eje horizontal:

.translate{ transform: translateX(100px)}

Para desplazar un elemento solo a lo largo del eje vertical ( y ) podemos utilizar el método de desglose translateY.

.translate{ transform: translateY(100px)}


* {
  box-sizing: border-box;
}
.contenedor {
  width: 340px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid #d9d9d9;
  position: relative;
}
.contenedor p {
  text-align: center;
  font-size: 16px;
  margin-top: 37px;
}
.transform {
  width: 100px;
  height: 100px;
  border: 1px solid #d9d9d9;
  background-image: url(images/transformCSS.png);
  position: absolute;
}
[class^=translate] {
  top: 25px;
  left: 20px;
}
.translate {
  -webkit-transform: translate(100px, 100px);
  -moz-transform: translate(100px, 100px);
  -ms-transform: translate(100px, 100px);
  transform: translate(100px, 100px);
}
.translateX {
  -webkit-transform: translate(200px);
  -moz-transform: translate(200px);
  -ms-transform: translate(200px);
  transform: translate(200px);
}

La parte que más nos interesa de todo este código es:

.translate  {transform : translate(100px, 100px);}
.translateX {transform : translate(200px);}




translate
translateX

translate

translateX

Redimensionar con scale()

Para redimensionar un elemento utilizamos una de la función scale(), o los métodos de desglose scaleX() y scaleX().

div{transform: scale(x-axis, y-axis);}

El método scale(x, y) reduce o amplía a escala el elemento transformado, donde x-axis representa el eje horizontal, e y-axis el eje vertical. Por ejemplo: si x-axis = 0.5 la anchura del elemento se verá reducida en un 50%. Y si y-axis = 2, la altura del elemento aumentara a 200% de su valor inicial. El valor por defecto de los parámetros x e y es 1 ( el elemento no será redimensionado ).

div{transform:  scale(.5, 2);}

En el caso que queramos redimensionar solo la anchura del elemento podemos utilizar la función scaleX() que redimensiona un elemento solo a lo largo del eje horizontal. Para redimensionar solo la altura del elemento utilizamos scaleY().

.reduceX{transform:  scaleX(.5);}
.aumentaY{transform:  scaleY(2);}

Veamos un ejemplo.


* {
  box-sizing: border-box;
}
.contenedor {
  width: 340px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid #d9d9d9;
  position: relative;
}
.contenedor p {
  text-align: center;
  font-size: 16px;
  margin-top: 37px;
}
.transform {
  width: 100px;
  height: 100px;
  border: 1px solid #d9d9d9;
  background-image: url(images/transformCSS.png);
  position: absolute;
}
[class^=scale] {
  top: 15px;
  left: 120px;
}
.scale {
  -webkit-transform: scale(1, .5);
  -moz-transform: scale(1, .5);
  -ms-transform: scale(1, .5);
  transform: scale(1, .5);
}
.scaleX {
  -webkit-transform: scaleX(2) translateY(120px);
  -moz-transform: scaleX(2) translateY(120px);
  -ms-transform: scaleX(2) translateY(120px);
  transform: scaleX(2) translateY(120px);
}

La parte que más nos interesa de todo este código es:

.scale{ transform: scale(1, .5);}
/*Para el div.scaleX utilizamos dos trasformaciones: scaleX y translateY*/
.scaleX{ transform: scaleX(2) translateY(120px);}



scale
scaleX(2)

scale

scaleX(2)

Observamos que al redimensionar una caja, los bordes, las imágenes de fondo y los elementos hijos ( <p> en este caso ) están redimensionados también. La caja aparece redimensionada alrededor de su centro. Decimos que el origen de la deformación se encuentra en el centro del elemento. Podemos cambiar el origen utilizando – como no - la propiedad transform-origin.

Sesgar con skew

Para deformar objetos en el CSS utilizamos el método skew ( sesgar ), o los métodos de desglose skewX ( sesgar horizontalmente ) y skewY ( sesgar verticalmente ). Todos estos métodos toman como parámetros los ángulos de deformación en grados sexagesimales ( deg ).

div.skewX{transform: skewX(15deg);}
div.skewY{transform: skewY(20deg);}
div.skew{transform: skew(15deg, 20deg);}

En el caso de skewX el eje vertical del elemento aparece inclinado hacia atrás en un ángulo de 15º. En el caso de skewY el eje horizontal aparece inclinado hacia adelante en un ángulo 20º. El método skew deforma el elemento en ambas direcciones.

Exactamente como en el caso de scale(), el origen de la deformación se encuentra en el centro del elemento, pero podemos cambiar el origen utilizando la propiedad transform-origin.


* {
  box-sizing: border-box;
}
.contenedor {
  width: 340px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid #d9d9d9;
  position: relative;
}
.contenedor p {
  text-align: center;
  font-size: 16px;
  margin-top: 37px;
}
.transform {
  width: 100px;
  height: 100px;
  border: 1px solid #d9d9d9;
  background-image: url(images/transformCSS.png);
  position: absolute;
}
[class^=skew] {
  top: 15px;
  left: 60px;
}
.skew {
  -webkit-transform: skew(15deg, 15deg);
  -moz-transform: skew(15deg, 15deg);
  -ms-transform: skew(15deg, 15deg);
  transform: skew(15deg, 15deg);
}
.skewX {
  -webkit-transform: skewX(15deg) translateX(120px);
  -moz-transform: skewX(15deg) translateX(120px);
  -ms-transform: skewX(15deg) translateX(120px);
  transform: skewX(15deg) translateX(120px);
}
.skewY {
  -webkit-transform: skewY(15deg) translateY(120px);
  -moz-transform: skewY(15deg) translateY(120px);
  -ms-transform: skewY(15deg) translateY(120px);
  transform: skewY(15deg) translateY(120px);
}




skew
skewX
skewY

skew

skewX

skewY

Entender skew()

See the Pen Skew in CSS by Gabi (@enxaneta) on CodePen.

Girar elementos con rotate()

Para girar un elemento utilizamos la función rotate().

div{transform: rotate(45deg);}

En este ejemplo el elemento esta girado 45º ( grados sexagesimales ) en el sentido del reloj.
Podemos girar un elemento en el sentido contrario utilizando valores negativas del ángulo:

div{transform: rotate(-45deg);}


* {
  box-sizing: border-box;
}
.contenedor {
  width: 340px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid #d9d9d9;
  position: relative;
}
.contenedor p {
  text-align: center;
  font-size: 16px;
  margin-top: 37px;
}
.transform {
  width: 100px;
  height: 100px;
  border: 1px solid #d9d9d9;
  background-image: url(images/transformCSS.png);
  position: absolute;
}
[class^=rotate] {
  top: 75px;
  left: 120px;
}
.rotate {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}




rotate

rotate

La propiedad transform-origin

En el ejemplo anterior el elemento está girado alrededor de su centro. Podemos cambiar el centro de rotación ( el origen ) utilizando la propiedad transform-origin.

elemento { transform-origin: x-axis y-axis z-axis | initial | inherit;}

Si el valor de z-axis ( solo para transformaciones 3D ) no está declarado su valor por defecto es 0.
Si el valor de y-axis no está declarado su valor por defecto es 50%.

El valor por defecto de transform-origin: 50% 50% 0;
Posibles valores para el x-axis (el eje horizontal):

- left (izquierda)
- center (centro)
- right (derecha)
- distancia
- %

Posibles valores para y-axis (el eje vertical) :

- top (arriba)
- center (centro)
- bottom (abajo)
- distancia
- %

Posibles valores para z-axis:

- distancia

.rotate-origen {
     transform-origin : 0 0;
     transform : rotate(45deg);
 }


* {
  box-sizing: border-box;
}
.contenedor {
  width: 340px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid #d9d9d9;
  position: relative;
}
.contenedor p {
  text-align: center;
  font-size: 16px;
  margin-top: 37px;
}
.transform {
  width: 100px;
  height: 100px;
  border: 1px solid #d9d9d9;
  background-image: url(images/transformCSS.png);
  position: absolute;
}
[class^=rotate] {
  top: 75px;
  left: 120px;
}
.rotate-origen {
  -webkit-transform-origin: 0 0;
  transform: rotate(45deg);
  -moz-transform-origin: 0 0;
  transform: rotate(45deg);
  -ms-transform-origin: 0 0;
  transform: rotate(45deg);
  transform-origin: 0 0;
  transform: rotate(45deg);
}




rotate

rotate

La perspectiva

En un dibujo, la perspectiva simula la tercera dimensión, da al observador la sensación de profundidad y volumen. La perspectiva depende de la posición del observador.
En CSS3 la propiedad perspective determina la distancia entre el observador virtual, y el objeto.
Cuanto más pequeño el valor de perspective, más cerca estamos del objeto, y por lo tanto más impresionante el efecto visual. Por lo contrario, cuanto más grande el valor de perspective, más lejos estamos del objeto, y la deformación es menos importante.

See the Pen Perspective in CSS by Gabi (@enxaneta) on CodePen.

w3.unpo<code>todo