CSS perspective-origin Property

The perspective-origin property in CSS is used to define the position at which the user is looking 3D object i.e. the vanishing point of the 3D object.

Syntax:

perspective-origin: 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.
    • cente: 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS perspective-origin Property
    </title>
      
    <style>
        .container1 {
            padding: 20px;
            perspective: 100px; 
            perspective-origin: 75%;
              
            /* For Safari Browsers */
            -webkit-perspective: 100px;
            -webkit-perspective-origin: 75%;
        }
        .container2 {
            padding: 20px;
            perspective: 100px; 
            perspective-origin: bottom right;
              
            /* For Safari Browsers */
            -webkit-perspective: 100px;
            -webkit-perspective-origin: bottom right;
        }
        .container3 {
            padding: 20px;
            perspective: 100px; 
            perspective-origin: center;
              
            /* For Safari Browsers */
            -webkit-perspective: 100px;
            -webkit-perspective-origin: center;
        }
        .rotate {
            width: 100px;
            padding: 50px;
            text-align: center;
            background: green;
            transform: rotateX(10deg);
        }
    </style>
</head>
              
<body>
    <div class = "container1">
          
        <p>perspective-origin: 75%;</p>
          
        <div class = "rotate">image</div>
          
    </div>
      
    <div class = "container2">
          
        <p>perspective-origin: bottom right;</p>
          
        <div class = "rotate">image</div>
          
    </div>
      
    <div class = "container3">
          
        <p>perspective-origin: center;</p>
          
        <div class = "rotate">image</div>
          
    </div>
</body>
  
</html>                                

chevron_right


Output:

Supported Browsers: The browser supported by perspective-origin property are listed below:

  • Google Chrome36.0, 12.0 -webkit-
  • Apple Safari 9.0, 4.0.3 -webkit-)
  • Mozilla Firefox 16.0, 10.0 -moz-
  • Opera 23.0, 15.0 -webkit-
  • Internet Explorer 10.0


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 :

2


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