Skip to content

Transform Skew

Condongkan elemen

Sintaks

visual="skew-x:[degrees]" or visual="skew-y:[degrees]"

Nilai

NilaiCSS OutputHuraian
0transform: skewX(0deg)Tiada condong
3transform: skewX(3deg)Condong 3°
6transform: skewX(6deg)Condong 6°
12transform: skewX(12deg)Condong 12°

Contoh

html
<div visual="skew-x:6">Skewed element</div>

Pratonton

Transformasi Condong

visual="skew-x:6" - Condongkan elemen sepanjang paksi

12°
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 skew-x:0">0°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:6">6°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:12">12°</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

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