Skip to content
Related Articles

Related Articles

HTML | DOM Style perspectiveOrigin Property
  • Last Updated : 02 Aug, 2019

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.




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




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


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
Recommended Articles
Page :