Flipping a simple image to a div (transitions and 3d transforms)

Plan

  1. Put an image on top of a div inside a container.
  2. Put that in another container with perspective defined.
  3. When hovering on the outside container, add a rotate around the Y axis to the inside container.

Demo

This is nice for exposing more information about an image.

Any content can go here.

Code

First, the markup.

<div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="/images/Cirques.jpg"/>
  </div>
  <div class="back face center">
    <p>This is nice for exposing more information about an image.</p>
    <p>Any content can go here.</p>
  </div>
</div>
</div>

Then the CSS, stripped of the vendor prefixes to keep it clean.

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

Flipping around other axes

You can also flip around the X and Z axes by changing rotateY to rotateX or rotateZ.

Note that I've had to change the shadow to keep it looking normal.

This is nice for exposing more information about an image.

Any content can go here.

Case Study: Flipping cards on the Southampton Hackney Association's Website

Part of the design for the Southampton Hackney Association included a grid of sponsors. The design was such that on hover or click, they would flip over revealing a contact number, email address or URL. We wanted this site to work on browsers that didn't support 3D transforms, as at the time, only webkit had support.

Code path for browsers with 3D transforms

The code used is exactly as above. The markup consists of a div, containing two divs for the back and front faces.

Fallback

In older browsers, jQuery Flip is used. Modernizr is used to detect support for 3D transforms and if not, the markup is altered to fit how jQuery flip requires it to be. The key part is that for normal browsers, normal 3D transforms are used, with none of the fluff required to get this to work.

Due to issues with getting jQuery flip to work on hover, the behaviour was changed to work on click.

Using this technique, the effect works on all browsers in use, back to IE6. The flip effect is of much higher quality on browsers that support 3D transforms, but still has the distinctive look and feel on older browsers. As we move forward, the percentage of users who hit the fallback will decrease.

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

avenue-origin