The Style perspective property in HTML DOM is used to determine how far an element is placed from the Z plane. It provides the 3D view of an element.
Syntax:
- It returns the perspective property.
object.style.perspective
- It sets the perspective property.
object.style.perspective = "none|length|initial|inherit"
Property Values:
- none: It is the default value. It sets the perspective to zero or perspective not set.
- length: It sets the distance where the element is placed from the view.
- initial: It sets the element to its initial position.
- inherit: The element inherits its property from parent element.
Example: This example displays the DOM style perspective property.
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>
|
Output: Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by DOM Style perspective Property are listed below:
- Google Chrome 36.0 and above
- Edge 12.0 and above
- Internet Explorer 10.0 and above
- Firefox 16.0 and above
- Safari 9.0 and above
- Opera 23.0 and above