Tutorials


CSS perspective-origin property


The perspective-origin property in CSS is used to control the origin of the perspective effect applied to an element’s child elements. Essentially, it defines the vanishing point for the 3D perspective, which is the point at which elements appear to converge in the 3D space.

The perspective-origin property allows you to adjust the position of this vanishing point, thereby influencing how the 3D effect is perceived. By default, this point is at the center of the element, but you can move it horizontally or vertically.

Syntax

.element {
  perspective-origin: x-axis y-axis;
}

  • x-axis: Defines the horizontal position of the perspective origin. Can be a length (e.g., 100px), a percentage, or a keyword (left, center, right).

  • y-axis: Defines the vertical position of the perspective origin. Can be a length (e.g., 50px), a percentage, or a keyword (top, center, bottom).

Default Value

  • The default value is perspective-origin: 50% 50%;, which places the perspective origin at the center of the element.

Example

.container {
  perspective: 500px;
  perspective-origin: left top;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transform: rotateY(45deg);
}

In this example:

  • The .container has a perspective of 500px, meaning it is set up to create a 3D space.
  • The perspective-origin is set to left top, so the vanishing point is at the top-left corner of the container.
  • The .box inside the container is rotated 45 degrees along the Y-axis, and the rotation will appear as if the top-left corner is the closest point to the viewer.

Visual Impact of perspective-origin

  • Horizontal Axis:

    • left or 0%: The vanishing point is at the left edge of the element.
    • center or 50%: The vanishing point is at the center (default).
    • right or 100%: The vanishing point is at the right edge.

  • Vertical Axis:

    • top or 0%: The vanishing point is at the top edge of the element.
    • center or 50%: The vanishing point is at the center (default).
    • bottom or 100%: The vanishing point is at the bottom edge.

Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Perspective Origin Example</title>
  <style>
    .container {
      perspective: 400px;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: lightgray;
    }

    .box {
      width: 100%;
      height: 100%;
      background-color: lightblue;
      transform: rotateX(30deg);
      transition: transform 0.5s ease;
    }

    .container-left-top {
      perspective-origin: left top;
    }

    .container-right-bottom {
      perspective-origin: right bottom;
    }

    .container:hover .box {
      transform: rotateX(-30deg);
    }
  </style>
</head>
<body>
  <div class="container container-left-top">
    <div class="box"></div>
  </div>
  
  <div class="container container-right-bottom">
    <div class="box"></div>
  </div>
</body>
</html>

Explanation

  • First Container (container-left-top):

    • The perspective origin is set to left top. The vanishing point is at the top-left corner, making the 3D transformation of .box appear as if it is tilting away from that corner.

  • Second Container (container-right-bottom):

    • The perspective origin is set to right bottom. The vanishing point is at the bottom-right corner, so the .box appears to tilt away from that corner.

Important Notes

  • The perspective-origin property affects the positioning of the 3D effect, not the position of the element itself. It changes how the viewer perceives the 3D transformations applied to the element's children.
  • The perspective-origin works in conjunction with the perspective property. Without perspective, the perspective-origin has no effect.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about