HTML | DOM Style perspectiveOrigin Property

Last Updated : 14 Jul, 2022

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 positioned, not the absolute parent element itself.

Syntax:

It returns the perspectiveOrigin property.

object.style.perspectiveOrigin

It is used to set the perspectiveOrigin property.

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

Return Values: It returns a string value that represents the perspective-origin property of an element

Property Values:

x-axis: It represents the horizontal position of the perspective origin. The possible value of x-axis are listed below:
- percentage (%): It set the x-axis in terms of percentage.
- length: It defines the length of x-axis.
- left: It sets the position left in x-axis.
- center: It sets position center in x-axis.
- right: I sets the position right in terms of x-axis.
y-axis: It represents the vertical position of the perspective origin. The possible value of y-axis are listed below:
- percentage (%): It set the position of y-axis in terms of percentage.
- length: It sets the position in terms of length.
- top: It sets the top position in y-axis.
- center: It sets the center position in y-axis.
- bottom: It sets the bottom position in y-axis.
initial: It sets the perspective-origin property to its default value.
inherit: The perspective-origin property is inherited from its parent.

Example 1: It is used to set the DOM style perspectiveOrigin property.

html

<!DOCTYPE html> 
<html> 
 
<head> 
    <title> 
        HTML DOM Style perspectiveOrigin Property
    </title> 
 
    <style>
        #box1 {
            margin-left: 100px;
            height: 150px;
            width: 100px;
            border: 5px solid green;
             
            /* For Chrome, Safari, Opera browsers */
            -webkit-perspective: 150px; 
            perspective: 150px;
        }
         
        #box2 {
            padding: 50px;
            position: absolute;
            border: 1px solid yellow;
            background-color: green;
             
            /* For Chrome, Safari, Opera browsers */
            -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
        }
    </style>
</head>
 
<body> 
    <h1>GeeksforGeeks</h1> 
     
    <h2>
        HTML DOM Style perspectiveOrigin Property
    </h2> 
     
    <p>
        Click the button to change the
        perspecive-origin property
    </p>
 
    <button onclick="myGeeks()">
        Click Here!
    </button>
 
    <div id="box1">GeeksforGeeks
        <div id="box2">
            A computer science portal for geeks
        </div>
    </div>
 
    <!-- script to set perspectiveOrigin property -->
    <script>
        function myGeeks() {
             
            // For Chrome, Safari and Opera browsers
            document.getElementById("box1").style.WebkitPerspectiveOrigin
                    = "30px 10%"; 
                     
            document.getElementById("box1").style.perspectiveOrigin
                    = "30px 10%";
        }
    </script>
</body> 
 
</html>                                

Output:

Before Click on the button:

After Click on the button:

Example 2: It is used to set the DOM style perspectiveOrigin property.

html

<!DOCTYPE html> 
<html> 
 
<head> 
    <title> 
        HTML DOM Style perspectiveOrigin Property
    </title> 
     
    <style>
        #div1 {
            margin-left:100px;
            height: 100px;
            width: 100px;
            border: 5px solid green;
             
            /* For Chrome, Safari and Opera browsers */
            -webkit-perspective: 25px; 
            perspective: 25px;
        }
         
        #div2 {
            padding: 30px;
            position: absolute;
            border: 1px solid yellow;
            background-color: green;
             
            /* For Chrome, Safari and Opera browsers */
            -webkit-transform: rotateX(75deg);
            transform: rotateX(75deg);
        }
    </style>
 
    <body> 
        <h1>GeeksforGeeks</h1> 
         
        <h2>
            HTML DOM Style perspectiveOrigin Property
        </h2> 
         
        <p>
            Click the button to change the
            perspecive-origin property
        </p>
 
        <button onclick="myGeeks()">Click Here!</button>
 
        <div id="div1">GeeksforGeeks
            <div id="div2">
                A computer science portal for geeks
            </div>
        </div>
         
        <script>
         
        function myGeeks() {
             
            /* For Chrome, Safari and Opera browsers */
            document.getElementById("div1").style.WebkitPerspectiveOrigin
                    = "30% 70%";
                     
            document.getElementById("div1").style.perspectiveOrigin
                    = "30% 70%";
        }
    </script>
</body> 
 
</html>                    