CSS 3D Transforms - Card Flip
CSS Card Flip
Here we demonstrate how to make a classic 3D object: Flipping a card.
Front
Back
The HTML Structure
Let's start with the basic HTML:
<div class="container">
<div class="card">
<div class="face front"><h2>Front</h2></div>
<div
class="face back"><h2>Back</h2></div>
</div>
</div>
The container element will house the 3D
space. The card element acts as the 3D object.
Two separate face elements are used for the
front and back faces of the card.
The CSS Styling
First, we define the 3D container box: Apply perspective, along with height and
width:
.container {
width: 200px;
height: 250px;
perspective: 600px;
}
Now the card element can be transformed in its
container's 3D space. We
add width: 100%; and height: 100%;. The position: relative is used to position card faces absolutely.
The transform-style: preserve-3d is essential here. It forces child elements
into 3D space. Without this, the faces flatten into a 2D sheet. We also add a CSS transition, so users can see the transform take effect:
.card {
width: 100%;
height: 100%;
position:
relative;
transition: transform 1s;
transform-style:
preserve-3d;
}
Then, we add some base styling for the two card faces. To position the faces in 3D space, we will need to reset their positions in 2D with position: absolute. To hide the back-side of the faces when they are faced away from the viewer, we use backface-visibility: hidden:
.face {
position: absolute;
height: 100%;
width:
100%;
backface-visibility: hidden;
text-align: center;
}
Next, style the front and backside, we add a basic 3D transform of rotateY(180deg) to the backside:
.front {
background: green;
}
.back {
background: red;
transform: rotateY(180deg);
}
With the front and back faces in place, the .card requires a style for when it is flipped. Here we do a horizontal flip when moving the mouse over the container:
.container:hover .card {
transform: rotateY(180deg);
}
Full Example of Card Flip
Here is the full example of the card flip:
Example
.container {
width: 200px;
height: 250px;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
position:
relative;
transition: transform 1s;
transform-style:
preserve-3d;
}
.face {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
text-align: center;
}
.front {
background: green;
}
.back {
background: red;
transform: rotateY(180deg);
}
.container:hover .card {
transform: rotateY(180deg);
}
Try it Yourself »
CSS Transform Properties
The following table lists all the 3D transform properties:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
CSS 3D Transform Functions
| Function | Description |
|---|---|
| matrix3d() | Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d() | Defines a 3D translation |
| translateZ() | Defines a 3D translation, using only the value for the Z-axis |
| scale3d() | Defines a 3D scale transformation |
| scaleZ() | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d() | Defines a 3D rotation |
| rotateX() | Defines a 3D rotation along the X-axis |
| rotateY() | Defines a 3D rotation along the Y-axis |
| rotateZ() | Defines a 3D rotation along the Z-axis |
| perspective() | Defines a perspective view for a 3D transformed element |
