La deformación consiste en inclinar o sesgar un elemento a partir de un ángulo dado. Este efecto que distorsiona la apariencia original de los objetos se aplica en un plano de dos dimensiones (2D). Por tanto, en CSS podemos deformar elementos a través de los ejes horizontal (X) y vertical (Y).
En CSS existe dos funciones se usan como valor de la propiedad de transformación transform. Las dos funciones tratadas en este artículo son skewX() y skewY(), para los ejes horizontal y vertical, respectivamente.
| Función | Descripción |
|---|---|
skewX() | Deforma el elemento a través del eje horizontal (X). |
skewY() | Deforma el elemento a través del eje vertical (Y). |
A diferencia de las transformaciones de traslación, rotación y escalado, no existe ninguna propiedad específica para deformar elementos.
Este tipo de transformación es un poco peculiar. Para deformar un elemento lo que hace es distorsionar cada uno de sus puntos en un cierto ángulo a través de la dirección indicada (X o Y). Cuanto más lejos esté un punto respecto a su origen, mayor será la inclinación, y más deformado quedará.
Hay que tener cuidado de no usar la función skew(), que se mantiene por razones de compatibilidad, pero está marcada como obsoleta y es probable que en un futuro ya no sea soportada en los navegadores web.
La función ‘skewX()’
La función skewX() debe ser usada como valor de la propiedad CSS transform, y permite indicar un ángulo de deformación o inclinación a través del eje horizontal (eje X). Al usar esta función, los vértices del elemento se desplazarán a través del eje horizontal. Los vértices superiores se desplazarán hacia la derecha o hacia la izquierda, y los inferiores lo harán en el sentido opuesto.
Esta función admite un único parámetro, que será un valor numérico en unidades de ángulo. Puede ser un valor positivo o negativo, y admite el uso de decimales. Si el valor es positivo, el elemento se inclinará hacia la izquierda, y si es negativo se inclinará hacia la izquierda. El valor por defecto es el 0.
Para visualizar un ejemplo, creamos un contenedor con un elemento cuadrado, de color turquesa, que deformamos con un ángulo de 20 grados.
Código CSS:
.contenedor {
background: #ff7f2aaa;
border: 1px solid #ff7f2a;
display: inline-block;
height: 40px;
width: 40px;
}
.contenido {
background: teal;
height: 40px;
width: 40px;
}
.deformarX {
transform: skewX(20deg);
}
Resultado:
AR
En este ejemplo, el caso de la izquierda aparece sin inclinar, mientras que el de la derecha aparece inclinado. Debido a que el valor es positivo, se inclina hacia la izquierda. Por tanto, los bordes inferiores se han desplazado hacia la derecha, y los superiores se han desplazado hacia la izquierda.
La función ‘skewY()’
La función skewY() es utilizada dentro de la propiedad transform, y permite indicar un ángulo de deformación o inclinación a través del eje vertical (eje Y). Cuando se usa esta función, los vértices del elemento se desplazarán a través del eje vertical. Los vértices de un lado se desplazarán hacia arriba o hacia abajo, y los del otro lado lo harán en el sentido opuesto.
Esta función solo admite un parámetro referente al valor de inclinación, expresado en unidades de ángulo. Si se usa un valor positivo, el elemento se inclinará hacia abajo, y si se indica un valor negativo, se deformará hacia arriba. Su valor por defecto es el 0, que indica que no se aplica deformación.
En este ejemplo creamos el mismo contenido que en el caso anterior, pero aplicamos una deformación vertical, también de 20 grados.
Código CSS:
.deformarY {
transform: skewY(20deg);
}
Resultado:
AR
En este ejemplo, el caso de la derecha aparece inclinado hacia abajo. El valor del ángulo es positivo, por lo que los bordes de la izquierda se han desplazado hacia arriba, y los bordes de la derecha se han desplazado hacia abajo.
