Lograr sesgo con transformación CSS: sesgar ambos lados

La imagen proporcionada muestra un efecto de sesgo intrigante que inclina ambas esquinas de un elemento. Para recrear este efecto usando la transformación CSS, siga estos pasos:

Aplicar perspectiva sesgada:

Para agregar perspectiva, use la siguiente propiedad CSS:

transform: perspective(distance) rotateY(angle);

Reemplace "distancia" con un valor para establecer la distancia de perspectiva (los valores más altos crean una perspectiva más lejana). Reemplace "ángulo" con el ángulo de rotación deseado (45 grados en este caso).

Ejemplo de CSS:

.red-box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

Código HTML:

Para aplicar la inclinación a un elemento, agregue la siguiente clase:

Ejemplo de recurso externo:

El código CSS y HTML proporcionado se deriva de http://desandro.github.com/3dtransforms/docs /perspectiva.html. Este sitio web ofrece más ejemplos y documentación sobre el uso de transformaciones de perspectiva.