La función skew() es una función incorporada que se utiliza para transformar un elemento en el plano 2D. Sesgar un elemento significa elegir un punto y empujarlo o tirarlo en diferentes direcciones.
Sintaxis:
skew( ax )
o
skew( ax, ay )
Parámetros:
- ax: este parámetro mantiene el ángulo que representa el eje horizontal para distorsionar un elemento.
- ay: Este parámetro mantiene el ángulo que representa el eje vertical para distorsionar un elemento. Si no está definido, toma el valor por defecto cero. Significa completamente sesgado en la dirección x.
Los siguientes ejemplos ilustran la función skew() en CSS:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS skew() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.skew_image {
transform-origin: top left;
transform: skew(30deg, 0);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS skew() function</h2>
<img class="skew_image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS skew() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.GFG {
font-size:35px;
font-weight:bold;
color:green;
transform: skew(45deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS skew() function</h2>
<div class="GFG">Welcome to GeeksforGeeks</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la función skew() se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera