En este artículo veremos cómo funciona la perspectiva CSS. La perspectiva de CSS es una nueva propiedad de CSS que se debe proporcionar para administrar la distancia entre el eje z. Todos sabemos que trabajamos con una superficie 2D. Entonces, si rotamos nuestros objetos, esta integridad no se muestra. La solución a este problema es la perspectiva CSS que vemos incluso con el eje z.
Funcionan como un proyector si la fuente está lejos del objeto, creando así una gran imagen en la pared. Se utilizan de forma muy sencilla aplicando la propiedad de perspectiva al elemento principal y realizando cualquier transformación en el elemento secundario que parezca un elemento 3D.
Sintaxis:
/* parent div */ perspective: perspective_distance; /* child div */ transform: value;
Si el div principal aplicó la perspectiva, cualquier propiedad de transformación en el elemento secundario se aplica para que se comporten como un objeto 3D
Ejemplo 1: El siguiente ejemplo se ilustra sin usar Perspectiva.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
/* parent div */
.main{
width: 200px;
height: 200px;
background-color: gray;
}
/* child div */
.box {
width: 200px;
height: 200px;
background-color: #0B7008;
/* transform the child object. */
transform: rotateX(60deg);
}
</style>
</head>
<body>
<!-- parent div -->
<div class="main">
<!-- child div -->
<div class="box"></div>
</div>
</body>
</html>
Producción:
Ejemplo 2: A continuación se muestra el ejemplo que ilustra el uso de Perspectiva.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
/* parent div */
.main{
width: 200px;
height: 200px;
background-color: gray;
/* Create perspective */
perspective: 800px;
}
/* child div */
.box {
width: 200px;
height: 200px;
background-color: #0B7008;
/* transform the child object. */
transform: rotateX(60deg);
}
</style>
</head>
<body>
<!-- parent div -->
<div class="main">
<!-- child div -->
<div class="box"></div>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome 36.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 23.0
- Safari 9.0
Publicación traducida automáticamente
Artículo escrito por mrsuryapratap y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA