La propiedad de perspectiva de estilo en HTML DOM se usa para determinar qué tan lejos se coloca un elemento del plano Z. Proporciona la vista 3D de un elemento.
Sintaxis:
- Devuelve la propiedad de perspectiva.
object.style.perspective
- Establece la propiedad de perspectiva.
object.style.perspective = "none|length|initial|inherit"
Valores de propiedad:
- none: Es el valor por defecto. Establece la perspectiva a cero o perspectiva no establecida.
- length: Establece la distancia a la que se coloca el elemento de la vista.
- initial: Coloca el elemento en su posición inicial.
- heredar: el elemento hereda su propiedad del elemento principal.
Ejemplo: este ejemplo muestra la propiedad de perspectiva de estilo DOM.
html
<!DOCTYPE html>
<html>
<head>
<style>
#circle {
height: 400px;
width: 400px;
margin-left: 50px;
background-color: #555;
border-radius: 50%;
}
#container {
padding: 50px;
margin: 0 60px;
border: 1px solid black;
background-color: white;
transform: rotateX(15deg);
}
h1, h2 {
color:green;
font-weight:bold;
}
</style>
</head>
<body>
<div id="circle">
<button onclick="myGeeks()">
Click Here!
</button>
<div id="container">
<h1>GeeksforGeeks</h1>
<h2>
A computer science portal for geeks
</h2>
</div>
</div>
<!-- Script to display perspective property -->
<script>
function myGeeks() {
document.getElementById("circle").style.perspective
= "100px";
}
</script>
</body>
</html>
Salida: Antes Haga clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad de perspectiva de estilo DOM se enumeran a continuación:
- Google Chrome 36.0 y superior
- Borde 12.0 y superior
- Internet Explorer 10.0 y superior
- Firefox 16.0 y superior
- Safari 9.0 y superior
- Ópera 23.0 y superior
Publicación traducida automáticamente
Artículo escrito por ChinkitManchanda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA