HTML - DOM Style Object perspective Property

Quiz

HTML DOM Style Object perspective property specifies the distance that how far an element is placed from z=0 plane to provide 3D view of an element. It is applied on the parent element as it affects the child element.

Smaller the property value, stronger is 3D effect and have the greater sense of depth whereas higher the property value, it has weaker sense of depth and 3D effect.

Syntax

Set the perspective property:

object.style.perspective= "length | none | initial | inherit";

Get the perspective property:

object.style.perspective;

Property Values

Value	Description
length	It specifies the distance of element placed from the view.
none	It is default value where no perspective is set.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents perspective property of an element.

Example of HTML DOM Style Object 'perspective' Property

The following example sets the perspective property on div element with id 'perspective' and it's effect is displayed on it's child div element with id 'child'. This example also removes the perspective property using none value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object perspective Property
    </title>
    <style>
        #perspective {
            padding: 50px;
            height: 200px;
            width: 200px;
            border: 2px solid;
            background-color: azure;
        }
        #child {
            padding: 10px;
            height: 100px;
            width: 100px;
            border: 2px solid #04af2f;
            background-color: aquamarine;
            transform: rotateX(20deg);
        }
    </style>
</head>
<body>
    <p>Click to add perspective.</p>
    <button onclick="fun()">Add Perspective</button>
    <button onclick="funTwo()">Remove Perspective</button>
    <div id="perspective">
        <div id="child">
            Welcome to Tutorials Point...
        </div>
    </div>
    <script>
        function fun() {
            document.getElementById("perspective")
                .style.perspective = "100px";
        }  
        function funTwo() {
            document.getElementById("perspective")
                .style.perspective = "none";
        }      
    </script>
</body>
</html>

Supported Browsers

Property
perspective	Yes 36	Yes 12	Yes 16	Yes 9	Yes 23

html_dom.htm

Print Page