HTML | DOM Style perspective Property Last Updated : 05 Jun, 2022 Comments Improve Suggest changes Like Article Like Report 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.perspectiveIt 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 aboveEdge 12.0 and aboveInternet Explorer 10.0 and aboveFirefox 16.0 and aboveSafari 9.0 and aboveOpera 23.0 and above Comment More infoAdvertise with us Next Article HTML | DOM Style perspective Property C ChinkitManchanda Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML | DOM Style perspectiveOrigin Property The perspectiveOrigin property in HTML DOM is used to describe the exact position of a 3D element based on the x and y-axis. This property has the facility to change the bottom position of 3D elements. The perspectiveOrigin property defines an element, it is child elements that are actually position 3 min read HTML | DOM Style padding Property The Style padding property is used for setting or returning the padding of an element. The Style padding property can be used in 4 different ways : div {padding: 30px} -In this case, all the four sides have a padding of 30px.div {padding: 100px 50px} -In this case, the top and bottom padding will be 4 min read HTML | DOM Style outlineStyle Property The Style outlineStyle property in HTML DOM is used to set or return the style of the outline around an element. Syntax: It is used to return the outlineStyle property.object.style.outlineStyleIt is used to set the outlineStyle property.object.style.outlineStyle = value Property Values: none: This i 2 min read HTML DOM Style paddingLeft Property The Style paddingLeft property in HTML DOM is used to set or return the left padding of the element. Syntax: It returns the paddingLeft property. object.style.paddingLeftIt sets the paddingLeft Property. object.style.paddingLeft = "% | length | initial | inherit"Return value: It returns the string v 2 min read HTML | DOM Style objectPosition Property The DOM Style objectPosition property is used to set or return how an image or video would be positioned in their own content box. Syntax: It returns the objectPosition property.object.style.objectPositionIt is used to set the objectPosition property.object.style.objectPosition = "position|initial|i 3 min read Like