HTML - DOM Style Object perspectiveOrigin Property

Quiz

HTML DOM Style Object perspectiveOrigin property sets the position of 3D element using x-axis and y-axis. It allows to change the bottom position of 3D elements.

By defining perspectiveOrigin property, child element is positioned not the parent element on which we are defining the property. It is used along with perspective property and affects only 3D transformed elements.

Syntax

Set the perspectiveOrigin property:

object.style.perspectiveOrigin= "x-axis y-axis|initial|inherit";

Get the perspectiveOrigin property:

object.style.perspectiveOrigin;

Property Values

Value	Description
x-axis	It represents horizontal placement of view on x-axis. Possible value of x-axis is mentioned below: length percentage left right center
y-axis	It represents vertical placement of view on y-axis. Possible value of y-axis is mentioned below: length percentage left right center
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 perspectiveOrigin property of an element.

Examples of HTML DOM Style Object 'perspectiveOrigin' Property

The follwoing example sets the perspectiveOrigin property of parent div element.

Set perspectiveOrigin property

The follwoing example sets the perspectiveOrigin property of parent div element to left, right and center.

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

Set perspectiveOrigin Using 'length' and 'percentage'

The follwoing example sets the perspectiveOrigin property of parent div element to length and percentage values.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object perspectiveOrigin Property
    </title>
    <style>
        #perspective {
            padding: 50px;
            height: 180px;
            width: 200px;
            border: 2px solid;
            background-color: azure;
            perspective: 100px;
        }
        #child {
            padding: 10px;
            height: 100px;
            width: 100px;
            border: 2px solid #04af2f;
            background-color: aquamarine;
            transform: rotateX(20deg);
        }
    </style>
</head>
<body>
    <p>
        Click to set Perspective Origin property.
    </p>
    <button onclick="fun()">Using length</button>
    <button onclick="funTwo()">length & percentage</button>
    <button onclick="funThree()">Using percentage</button>
    <div id="perspective">
        <div id="child">
            Welcome to Tutorials Point...
        </div>
    </div>
    <script>
        function fun() {
            document.getElementById("perspective")
                .style.perspectiveOrigin = "5px 40px";
        }  
        function funTwo() {
            document.getElementById("perspective")
                .style.perspectiveOrigin = "40px 5%";
        }  
        function funThree() {
            document.getElementById("perspective")
                .style.perspectiveOrigin= "1% 10%";
        }      
    </script>
</body>
</html>

Supported Browsers

Property
perspectiveOrigin	Yes 36	Yes 12	Yes 16	Yes 9	Yes 23

html_dom.htm

Print Page