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!
Twittear
No hay comentarios:
Publicar un comentario