Skip to content

Transform Rotate ​

Putar elemen

Sintaks ​

visual="rotate:[degrees]"

Nilai ​

NilaiCSS OutputHuraian
0transform: rotate(0deg)Tiada putaran
45transform: rotate(45deg)Putaran 45°
90transform: rotate(90deg)Putaran 90°
180transform: rotate(180deg)Putaran 180°

Contoh ​

html
<div visual="rotate:45">Rotated 45 degrees</div>

Pratonton ​

Transformasi Putaran ​

visual="rotate:45" - Putar elemen mengikut darjah

0°
45°
90°
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:0">0°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small rotate:45">45°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small rotate:90">90°</div>
</div>

Nilai Arbitrari ​

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

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