The
HTML
The HTML structure to accomplish the
two-sided effect is as you would expect it to be:
<div
class="flip-container"
ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div
class="front">
<!-- front content
-->
</div>
<div
class="back">
<!-- back content
-->
</div>
</div>
</div>
There are two content panes,
"front" and "back", as you would expect, but also two
containing elements with very specific roles explained by their CSS. Also note
the ontouchstart
piece which allows the panes to swap on touch screens. Obviously you should
break that code into a separate, unobtrusive JavaScript block if you wish.
The
CSS
I'm willing to bet that outside of
the usual vendor prefix bloat, you'd be surprised at how little CSS is involved:
/*
entire container, keeps perspective */
.flip-container
{
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front, .back {
width: 320px;
height: 480px;
}
/*
flip speed goes here */
.flipper
{
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/*
hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/*
front pane, placed above back */
.front
{
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/*
back, initially hidden pane */
.back
{
transform: rotateY(180deg);
}
Here's a rough overview of the
process:
- The outlying container sets the entire animation area's perspective
- The inner container is the element that actually flips, spinning 180 degrees when the parent container is hovered over. This is also where you control the transition speed. Changing the rotation to -180deg spins the elements in the reverse direction.
- The front and back elements are positioned absolutely so they can "overlay" each other in the same position; their backface-visibility is hidden so the back of the flipped elements don't display during the animation
- The front element has a higher z-index than the back element so the front element may be coded first but it still displays on top
- The back element is rotate 180 degrees, so as to act as the back.
That's really all there is to it!
Put this simple structure into place and then style each side as you'd like!
A
Note from CSS Animation Expert Ana Tudor
Applying certain
properties with certain values
(like overflow: hidden) on the card element would disallow
it to have 3D transformed children. I believe this is relevant because I got
into trouble with overflow: hidden precisely in such cases, where all
children of the 3D transformed element were in the same plane, but one or more
had been rotated by 180deg.
CSS
Flip Toggle
If you'd prefer the element only
flip on command via JavaScript, a simple CSS class toggle will do the trick:
.flip-container:hover
.flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}
Adding the flip class to the
container element will flip the card using JavaScript -- no user hover
required. A JavaScript comment like document.querySelector("#myCard").classList.toggle("flip") will do the flip!
CSS
Vertical Flip
Performing a vertical flip is as
easy as flipping the axis and adding the transform-origin axis value. The origin of the flip
must be updated and the card rotated the other way:
.vertical.flip-container
{
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 213.5px;
/* half of height */
}
.vertical.flip-container:hover .flipper
{
transform: rotateX(-180deg);
}
You can see that the X access gets used, not the Y.
Internet
Explorer Support
Internet Explorer requires
significant modifications to the standard flip code because it has not yet
implemented all of the modern transform properties. Essentially both the
front and back elements need to flipped at the same time:
/*
entire container, keeps perspective */
.flip-container
{
perspective: 1000px;
transform-style: preserve-3d;
}
/*
UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container,
.front, .back {
width: 320px;
height: 480px;
}
/*
flip speed goes here */
.flipper
{
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/*
hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front
{
z-index: 2;
transform: rotateY(0deg);
}
/*
back, initially hidden pane */
.back
{
transform: rotateY(-180deg);
}
/*
Some vertical flip updates
*/
.vertical.flip-container
{
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
With the code above, IE10 will
rotate flip the elements as expected!
