Recomendaciones de cursos:

Función perspective() de CSS

Definición y uso perspective() CSS

perspective() La función define la distancia del usuario al plano z=0. transform en la propiedad.

Ejemplo

Usar perspective() Añadir un efecto de perspectiva a dos cubos:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Prueba por tu cuenta

Sintaxis de CSS

perspective(longitud|none)
Valor Descripción
longitud Obligatorio. Especifica la distancia del usuario al plano z=0. none indica que no se realiza la transformación.

Detalles técnicos

Versión: CSS Transforms Module Level 2

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero admite esta función.

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

Páginas relacionadas

Tutoriales:Transformación 3D en CSS

Referencia:CSS transform atributo

Referencia:Función rotate() de CSS

Referencia:Función rotate3d() de CSS

Referencia:Función rotateX() de CSS

Referencia:CSS rotateY() función

Referencia:CSS rotateZ() función