Transform Origin
Tetapkan titik asal transformasi
Sintaks
visual="origin:[value]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
center | transform-origin: center | Asal tengah |
top | transform-origin: top | Asal atas |
top-right | transform-origin: top right | Atas kanan |
right | transform-origin: right | Asal kanan |
bottom-right | transform-origin: bottom right | Bawah kanan |
bottom | transform-origin: bottom | Asal bawah |
bottom-left | transform-origin: bottom left | Bawah kiri |
left | transform-origin: left | Asal kiri |
top-left | transform-origin: top left | Atas kiri |
Contoh
html
<div visual="rotate:45 origin:top-left">Rotate from corner</div>Pratonton
Asal Transformasi
visual="origin:center" - Tetapkan titik pangsi untuk transformasi
center
top-left
Lihat Kod
html
<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:primary text:white rounded:small rotate:45 origin:center">center</div>
<div space="p:small" visual="bg:primary text:white rounded:small rotate:45 origin:top-left">top-left</div>
</div>Nilai Arbitrari
Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
html
<div visual="transform:[custom-value]">Custom</div>