liveBook · Manning

Backface-visibility

As explained in Tiny CSS Projects

The CSS backface-visibility property controls whether the back face of a transformed element is visible when it faces away from the viewer.

The CSS backface-visibility property hides an element’s back when a transform turns that side away from the viewer. Applied to both faces of a virtual credit card, it makes only the front-facing side visible during a 3D flip. section 9.5.2

A working card flip combines several declarations:

  • Set backface-visibility: hidden on both card sides so the side facing away disappears. section 9.5.2
  • Use transform-style: preserve-3d on the card container to establish front-and-back depth. section 9.5.2
  • Rotate the back with transform: rotateY(-180deg), then rotate the whole card on hover. section 9.5.1 section 9.5.2
  • Overlay the two faces with relative positioning on the container and absolute positioning on the back. section 9.5.1
  • Place the interaction inside @media (hover: hover); devices without hover show both sides instead. section 9.5.1

Virtual credit card

A front-and-back credit card uses the property to hide the mirrored back while the card rests in its default state. Hovering rotates the card 180 degrees on the y-axis, revealing the back and hiding the front; a transition can make the change appear as a physical flip. section 9.0 section 9.5.2

Listing 9.23 Hiding the back and exposing it on hover
@media (hover: hover) {
  ...
  .card-item {
    transform-style: preserve-3d;     #1
  }
  .card-item__side {
    backface-visibility: hidden;      #2
  }
  .card-item:hover {                  #3
    transform: rotateY(180deg);       #3
  }                                   #3
}

The CSS listing shows the container’s 3D setup, hidden card sides, and hover rotation together. section 9.5.2

How Tiny CSS Projects covers it

How deep it goes
Explains the property through a worked 3D card effect, alongside transforms and preserve-3d, but does not develop broader 3D theory.
Examples
Demonstrates hidden card faces, a mirrored rotated back, and a hover-triggered 180-degree credit-card flip.
What it assumes
Assumes basic CSS positioning and transforms while explaining the move from flat 2D layouts to front-and-back 3D space.
What you can do after
Apply it via CSS to build a hover-based 3D card flip that adapts its behavior for devices without hover.
How it connects
Connects backface-visibility to CSS transforms, transform-style, CSS transitions, absolute positioning, and hover media queries.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.