perspective-origin
Sets the vanishing point position for 3D transforms. poc is the default; moving the vanishing point changes the viewpoint of the 3D effect.
Class List
| Class | CSS | Description |
|---|---|---|
poc | perspective-origin: center | center vanishing point (default) |
pot | perspective-origin: top | top vanishing point |
pob | perspective-origin: bottom | bottom vanishing point |
pol | perspective-origin: left | left vanishing point |
por | perspective-origin: right | right vanishing point |
Usage Examples
perspective-origin is applied to the parent element that has the perspective property set.
<!-- Default center viewpoint -->
<div class="poc">
<div class="tr45deg">3D rotated element</div>
</div>
<!-- Top-left viewpoint -->
<div class="pol">
<div class="tr45deg">Viewed from the left</div>
</div>