Transform Backface

Kawal keterlihatan bahagian belakang elemen apabila diputar dalam 3D

Sintaks

visual="backface:[value]"

Nilai

Nilai	CSS Output	Huraian
visible	backface-visibility: visible	Belakang kelihatan
hidden	backface-visibility: hidden	Belakang tersembunyi

Contoh

<div visual="backface:hidden rotate-y:180">Hidden when flipped</div>

Pratonton

Keterlihatan Belakang

visual="backface:hidden" - Tunjukkan atau sembunyikan bahagian belakang apabila diputar 180°

visible + rotate-y:180

👀

hidden + rotate-y:180

🙈

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">visible + rotate-y:180</span>
    <div space="p:medium" visual="perspective:normal">
      <div space="p:small" visual="bg:primary text:white rounded:small backface:visible rotate-y:180">👀</div>
    </div>
  </div>
  <div layout="flex:col" space="g:tiny">
    <span visual="text:neutral-500 text-size:tiny">hidden + rotate-y:180</span>
    <div space="p:medium" visual="perspective:normal">
      <div space="p:small" visual="bg:danger text:white rounded:small backface:hidden rotate-y:180">🙈</div>
    </div>
  </div>
</div>