A flipping-over effect rotates a bounded component to reveal its opposite side. A virtual credit card uses the technique to show its front by default and expose its back when a user hovers. section 9.0
Build the effect by combining these CSS behaviors:
- Place the back face absolutely at the container’s top-left corner so it overlays the front. section 9.5.1
- Rotate the back face 180 degrees on the horizontal axis so its contents are correctly oriented when revealed. section 9.5.1
- Hide whichever face points away from the viewer with backface-visibility: hidden. section 9.5.2
- Preserve 3D space on the card container, rotate it on hover, and use a transition to make the change look like a physical flip. section 9.5 section 9.5.2
Virtual credit card
A card component displays its front and back as two sides of one bounded object. On devices that support hover, the back is stacked over the front, hidden while facing away, and revealed by rotating the card on hover. Devices without hover show the front and back at the same time. section 9.0 section 9.5.1
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
}
Inspect the compact CSS pattern that establishes 3D space, hides each rear-facing side, and rotates the card on hover. section 9.5.2
