backface-visibility
Controls whether the back face of a 3D-rotated element is visible. bfvh is essential for hiding the back in card flip animations.
Class List
| Class | CSS | Description |
|---|---|---|
bfvv | backface-visibility: visible | Back face visible (default). Shows mirror-reversed content when flipped |
bfvh | backface-visibility: hidden | Hides back face. Essential for card flip animations |
visible vs hidden
Compares how the back face appears on a Y-axis 180° rotated element.
visible (default value) —bfvv
Backface visible
Back face visible as mirror-reversed version
hidden — bfvh
Not visible
Back face completely hidden and transparent
Usage Examples
<!-- 3D card flip (complete example) -->
<div class="per100rem w30rem h20rem">
<div class="pr tsp3d w100p h100p tall600msease hover-tryy180deg">
<!-- Front face -->
<div class="pa w100p h100p bg6366F1 cFFFFFF df jcc aic br8px bfvh">
Front content
</div>
<!-- Back face (pre-rotated 180deg) -->
<div class="pa w100p h100p bg34D399 cFFFFFF df jcc aic br8px bfvh tryy180deg">
Back content
</div>
</div>
</div>
<!-- Standalone: hide backface -->
<div class="bfvh tryy45deg">
Element rotated 45deg (backface hidden)
</div>Tips & Notes
Essential card flip combination
For card flips: tsp3d on parent, per100rem on grandparent, bfvh on both faces.
Apply to both front and back
In card flips, bfvh must be on both faces. Back-only causes front overlap after flip.
transform-style: preserve-3d required
bfvh only works when parent has tsp3d. With tsf (flat), back face concept doesn't exist.