Transform Backface

Control visibility of element back side when rotated in 3D

Syntax

visual="backface:[value]"

Values

Value	CSS Output	Description
visible	backface-visibility: visible	Backface visible
hidden	backface-visibility: hidden	Backface hidden

Examples

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

Preview

Backface Visibility

visual="backface:hidden" - Show or hide backside when rotated 180°

visible + rotate-y:180

👀

hidden + rotate-y:180

🙈

View Code

<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>