viernes, 6 de junio de 2014

La deformación



1. La deformación en los dos ejes

La función skew permite realizar una deformación del elemento en los dos ejes. La unidad puede expresarse en grados deg o en radianes rad.

Este es un ejemplo de una deformación horizontal de 20 grados y una deformación vertical de 5 grados:

.deformar {
-moz-transform: skew(20deg,-5deg);
-webkit-transform: skew(20deg,-5deg);
-o-transform: skew(20deg,-5deg);
transform: skew(20deg,-5deg);
}

El resultado de la transformación:


2. La deformación un único eje

Podrá usar las funciones: 
  • skewX: para la deformación horizontal, 
  • skewY: para la deformación vertical.

En este ejemplo, la transformación es exclusivamente horizontal:

.deformar {
-moz-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}

El resultado visual:


Espero haber ayudado en algo. Hasta la próxima oportunidad!








No hay comentarios:

Publicar un comentario en la entrada