News

Flip 2D to 3D with CSS transforms

Epiphany’s Lawrie Cape demonstrates how create a page element that reveals the reverse side with the help of CSS transforms

HMMain

Epiphany’s Lawrie Cape demonstrates how create a page element that reveals the reverse side with the help of CSS transforms

HMMain

GET THE CODE FOR THIS TUTORIAL

1. Write the HTML

First we need to write the HTML for our postcard. Each postcard is composed of a postcard-front and postcard-back <div>, which contain the front and back images. These are wrapped in an outer div with the class “postcard”. This lets us target each face individually, as well as the entire postcard. Make sure your front and back images are the same size for the effect to work properly.

HTML:
<div class="postcard">
<div class="postcard-back">
<img src="img/postcard-back.jpg"/>
</div>
<div class="postcard-front">
<img src="img/postcard-front.jpg"/>
</div>
</div>

2. Set the CSS

Next, we absolutely position the front and back postcard divs and relatively position the postcard container. This allows the front and back faces to overlay each other instead of following the flow of the document. Note the width and height of the container is being set to the size of the images here:

CSS:
.postcard {
position: relative;
margin: 0 auto;
width: 400px;
height: 270px;
}
.postcard-front,
.postcard-back {
position: absolute;
}

3. Hide the backs

The next step is to set the backface-visibility of the faces. This means that when they are rotated, the backs of each image will be hidden. By default, we would see a mirrored version of the front face. We also set up a CSS transition for the front and back face’s transform property and set the initial state of the back image to be rotated 180 degrees on the y axis:

.postcard-front,
.postcard-back{
backface-visibility: hidden;
transition: transform 1s ease-in-out;
}
.postcard .postcard-back{
transform: rotateY( 180deg );
}

4. Add the interactivity

Modernizr (modernizr.com), a feature detection tool, is used to see if the browser supports CSS transitions and 3D transformations. If it does support it, the csstransforms3d and csstransitions classes will be added to the HTML element. This CSS then rotates the front and back faces when the user hovers over the postcard container. The transition property we have already applied will animate the property.

.csstransforms3d.csstransitions .postcard:hover .postcard-front{
transform: rotateY( 180deg );
}
.csstransforms3d.csstransitions .postcard:hover .postcard-back{
transform: rotateY( 0deg );
}

5. Supporting old browsers

Finally, we add some CSS to show the postcard back on hover for browsers which do not support CSS transitions and 3D transformations. For these browsers, Modernizr will add the classes no-csstransforms3d and no-csstransitions to the HTML element. For these browsers, we will simply hide the postcard front on hover, for a useable fallback.

.no-csstransforms3d .postcard:hover .postcard-front,
.no-csstransitions .postcard:hover .postcard-front{
display:none;
}

6. Take it further

That may be the basic effect applied, but there’s lots more you can do with it. Holiday Memories, for example, features portrait postcards as well as landscape. For the correct effect, these had to rotate on their z axis as well as their y axis when selected. Some random rotations to the postcard containers was also added to provide variety to the timeline. Experimenting with the perspective property CSS3 perspective can also change the 3D effect in interesting ways.

×