Transform Perspective Origin

Tetapkan lokasi titik lenyap perspektif

Sintaks

visual="perspective-origin:[value]"

Nilai

Nilai	CSS Output	Huraian
center	perspective-origin: center	Asal tengah
top	perspective-origin: top	Asal atas
bottom	perspective-origin: bottom	Asal bawah
left	perspective-origin: left	Asal kiri
right	perspective-origin: right	Asal kanan
top-left	perspective-origin: top left	Atas kiri
top-right	perspective-origin: top right	Atas kanan
bottom-left	perspective-origin: bottom left	Bawah kiri
bottom-right	perspective-origin: bottom right	Bawah kanan

Contoh

<div visual="perspective:normal perspective-origin:top">Top origin</div>

Pratonton

Asal Perspektif

visual="perspective-origin:center" - Tetapkan lokasi titik lenyap untuk transformasi 3D

left

3D

center

3D

right

3D

Lihat Kod

<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">left</span>
    <div space="p:medium" visual="perspective:normal perspective-origin:left">
      <div space="p:small" visual="bg:primary text:white rounded:small rotate-y:30">3D</div>
    </div>
  </div>
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">center</span>
    <div space="p:medium" visual="perspective:normal perspective-origin:center">
      <div space="p:small" visual="bg:success text:white rounded:small rotate-y:30">3D</div>
    </div>
  </div>
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">right</span>
    <div space="p:medium" visual="perspective:normal perspective-origin:right">
      <div space="p:small" visual="bg:warning text:black rounded:small rotate-y:30">3D</div>
    </div>
  </div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

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