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 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"

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                

chevron_right


Output:
Before Click on the button:

After Click on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:
Before click on the button:

After click on the button:

Supported Browsers: The browsers supported by DOM Style perspectiveOrigin property are listed below:

  • Google Chrome 36.0
  • Internet Explorer 10.0/Edge
  • Firefox 16.0
  • Opera 23.0
  • Apple Safari 6.1


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.