HTML | DOM Style perspective Property
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="myBeginner()"> Click Here! </ button > < div id="container"> < h1 >w3wiki</ h1 > < h2 > A computer science portal for Beginner </ h2 > </ div > </ div > <!-- Script to display perspective property --> < script > function myBeginner() { 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