Transform Perspective

Set 3D perspective on container (apply to parent of transformed elements)

Syntax

visual="perspective:[value]"

Values

Value	CSS Output	Description
none	perspective: none	No perspective
dramatic	perspective: 100px	Dramatic perspective
near	perspective: 300px	Near perspective
normal	perspective: 500px	Normal perspective
midrange	perspective: 800px	Midrange perspective
far	perspective: 1000px	Far perspective
distant	perspective: 1200px	Distant perspective

Examples

<div visual="perspective:normal"><div visual="rotate-y:45">3D rotated</div></div>

Preview

3D Perspective

visual="perspective:normal" - Control 3D depth perception - apply to parent, transform children

dramatic

3D

normal

3D

far

3D

View Code

<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">dramatic</span>
    <div space="p:medium" visual="perspective:dramatic">
      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:45">3D</div>
    </div>
  </div>
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">normal</span>
    <div space="p:medium" visual="perspective:normal">
      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:45">3D</div>
    </div>
  </div>
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">far</span>
    <div space="p:medium" visual="perspective:far">
      <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:45">3D</div>
    </div>
  </div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="transform:[custom-value]">Custom</div>