HTML DOM Style paddingLeft Property

HTML | DOM Style perspective Property

Last Updated : 05 Jun, 2022

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

HTML DOM Style paddingLeft Property

C

ChinkitManchanda

Improve

Article Tags :

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

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

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

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

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

HTML DOM | Style paddingLeft Property

The Style paddingLeft property is used for setting or returning the left padding of an element. The padding property inserts the user desired space within the border of an element.Syntax : To get the property: object.style.paddingLeftTo set the property: object.style.left = "auto|length|%|initial|in