Perspective origin property (perspective-origin)

The perspective-origin property sets the origin for perspective property like transform-origin property does for transform property, which is that it defines where a 3D element is based in the X-axis and Y-axis thus allowing us to change the bottom position of that element. It takes the same values and keywords as transform-origin.

Syntax:

selector {

perspective-origin: x-axis y-axis z-axis | initial | inherit;

}

Values:

x-axis; Transforms the position origin of an element by X-axis; Possible values are:
- left
- center
- right
- length (px, em…)
- %
y-axis; Transforms the position origin of an element by Y-axis; Possible values are:
- top
- center
- bottom
- length (px, em…)
- %
z-axis; In 3D transformation, it transforms the position origin of an element by Z-axis; Possible values are:
- length (px, em…)
initial, inherit

NOTE: The perspective-origin property has to be used together with the perspective property.

Example

The perspective-origin property example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    height: 200px; width: 80%; margin: 10px; padding: 10px;
    border: 1px dashed #222; background-color:lightblue; color:blue;
    font-size:30px;
    perspective: 120px;
    perspective-origin: 20% 30%;
    /* ADD proprietary selectors if needed */
}
div div {
   background-color:blue; color:lightblue; 
   transform: rotateX(90deg);
   /* ADD proprietary selectors if needed */
}
</style>
</head>
  
<body>

<h3>Perspective origin property example with two nested boxes</h3>
<div>MAIN box
    <div>NESTED box
    </div>
</div>

</body>
</html>

›› go to examples ››

Perspective origin property (perspective-origin)

Syntax:

Values:

Example

The perspective-origin property example:

Comments

About

Contact

Get Connected