perspective
Adds perspective depth to 3D-transformed elements. Lower values produce intense 3D effects; higher values produce subtle effects. per100rem gives subtle depth, per50rem gives dramatic perspective.
Class List
Pattern: per{value}{unit}
| Class | CSS | Description |
|---|---|---|
per30rem | perspective: 30rem | 300px -- very dramatic 3D effect |
per50rem | perspective: 50rem | 500px -- dramatic perspective |
per80rem | perspective: 80rem | 800px -- natural perspective |
per100rem | perspective: 100rem | 1000px -- subtle depth |
per150rem | perspective: 150rem | 1500px -- very subtle effect |
per500px | perspective: 500px | 500px (px unit) |
per1000px | perspective: 1000px | 1000px (px unit) |
Visual Comparison
Compares the difference in perspective values on the same 30-degree Y-axis rotation.
dramatic (50rem) — per50rem
3D
natural (80rem) — per80rem
3D
subtle (150rem) — per150rem
3D
Usage Examples
<!-- Card flip container -->
<div class="per100rem">
<div class="tsp3d tall600msease hover-tryy180deg">
<div class="pa w100p h100p bfvh bg6366F1">Front</div>
<div class="pa w100p h100p bfvh tryy180deg bg34D399">Back</div>
</div>
</div>
<!-- Dramatic 3D tilt -->
<div class="per50rem">
<div class="trx20deg">Dramatic tilt</div>
</div>
<!-- Natural hover tilt -->
<div class="per100rem">
<div class="tall300msease hover-tryy15deg">
Tilts slightly on hover
</div>
</div>Tips & Notes
Apply to parent
perspective is set on the parent of 3D-transformed elements. Child elements share the same perspective space.
Value guide
50rem (500px) or less: dramatic effect. 80rem-120rem (800-1200px): natural effect. Typically per80rem to per100rem looks most natural.