La propiedad de perspectiva CSS se utiliza para dar perspectiva a los objetos 3D. La perspectiva es la representación de objetos 3D en un plano 2D para dar la apariencia de profundidad y distancia entre sí. Al definir la propiedad de perspectiva, el elemento secundario obtiene la perspectiva, no el elemento principal. Entonces, el valor define qué tan cerca está el niño del plano Z.
Cada elemento 3D se vuelve más grande si z es mayor que 0 y cada elemento 3D se vuelve más pequeño si z es menor que 0. La fuerza del efecto puede determinarse por el valor de la propiedad de perspectiva. Grandes valores de perspectiva pueden producir una pequeña transformación y pequeños valores de perspectiva pueden producir una gran transformación. La parte de los elementos 3D que está detrás del usuario, es decir, si las coordenadas del eje z son mayores que el valor de la propiedad CSS de la perspectiva, no será posible dibujarlos. Por defecto, el punto de fundido se coloca en la posición central del elemento, aunque podemos cambiar su posición usando la propiedad de origen de la perspectiva . Al usar una propiedad de perspectiva que no tiene ningún valor, se puede crear un nuevo contexto de apilamiento .
Sintaxis:
perspective: length| none| initial| inherit;
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
longitud : la propiedad de longitud se utiliza para establecer la distancia del elemento secundario desde el visor hasta el plano Z. Por lo tanto, cuanto menor sea el valor, se formará una imagen más espléndida.
Sintaxis:
perspective: length;
Ejemplo: este ejemplo ilustra el uso de la propiedad de perspectiva donde el valor de longitud se establece en 200 px.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | perspective Property </title>
<style>
.class1 {
margin-top: 20px;
margin-left: 40px;
height: 200px;
width: 200px;
color: #0F9D58;
border: 1px solid;
perspective: 200px; /*length value of perspective property*/
}
.class2 {
padding: 60px;
border: 2px solid;
background: #0F9D58;
color: white;
transform: rotateX(45deg) rotateY(45deg);
}
</style>
</head>
<body>
<div class="class1">GeeksforGeeks
<div class="class2">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
none: Es el valor por defecto. Indica que no se ha establecido ninguna perspectiva. ninguno es equivalente a 0px.
Sintaxis:
perspective: none;
Ejemplo: este ejemplo ilustra el uso de la propiedad de perspectiva donde el valor de la propiedad se establece en ninguno.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | perspective Property </title>
<style>
.class1 {
margin-top: 20px;
margin-left: 40px;
height: 200px;
width: 200px;
color: #0F9D58;
border: 1px solid;
/*none value of perspective property*/
perspective: none;
}
.class2 {
padding: 60px;
border: 2px solid;
background: #0F9D58;
color: white;
transform: rotateX(45deg) rotateY(45deg);
}
</style>
</head>
<body>
<div class="class1">GeeksforGeeks
<div class="class2">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado, es decir, initial establece el valor predeterminado. No hay perspectiva establecida.
Sintaxis:
perspective: initial;
Ejemplo: Este ejemplo ilustra el uso de la propiedad de perspectiva donde el valor de la propiedad se establece en inicial.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | perspective Property </title>
<style>
.class1 {
margin-top: 20px;
margin-left: 40px;
height: 200px;
width: 200px;
color: #0F9D58;
border: 1px solid;
/*initial value of perspective property*/
perspective: initial;
}
.class2 {
padding: 60px;
border: 2px solid;
background: #0F9D58;
color: white;
transform: rotateX(45deg) rotateY(45deg);
}
</style>
</head>
<body>
<div class="class1">GeeksforGeeks
<div class="class2">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
heredar : se usa para heredar una propiedad a un elemento del valor de propiedad de su elemento principal, es decir, heredar recibe la propiedad del elemento principal. Cuando se usa con el elemento raíz, se usará la propiedad inicial.
Sintaxis:
perspective: inherit;
Ejemplo: Este ejemplo ilustra el uso de la propiedad de perspectiva donde el valor de la propiedad está configurado para heredar.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | perspective Property </title>
<style>
.class0 {
perspective: 150px;
}
.class1 {
margin-top: 20px;
margin-left: 40px;
height: 200px;
width: 200px;
color: #0F9D58;
border: 1px solid;
/*inherit value of perspective property*/
perspective: inherit;
}
.class2 {
padding: 60px;
border: 2px solid;
background: #0F9D58;
color: white;
transform: rotateX(45deg) rotateY(45deg);
}
</style>
</head>
<body>
<div class="class0">
<div class="class1">GeeksforGeeks
<div class="class2">GeeksforGeeks</div>
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de perspectiva se enumeran a continuación:
- Google Chrome 36.0
- Internet Explorer 10.0
- Microsoft Edge 12.0
- Firefox 16.0
- Ópera 23.0
- Safari 9.0
Publicación traducida automáticamente
Artículo escrito por gribeshdhakal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA