So I need to create a flipping image almost exactly like this.

But the difference is what if I want several buttons and each one flips to a specific face. Lets say I want 4 buttons labelled 1, 2, 3 and 4, and I want 4 different card faces, each a different color with the corresponding number on the face. So the page will load with face 1 showing and clicking on button 1 will do nothing, but clicking on button 3 will flip to a face showing the number 3 and so on etc etc. Any ideas?

So I need to create a flipping image almost exactly like this.

But the difference is what if I want several buttons and each one flips to a specific face. Lets say I want 4 buttons labelled 1, 2, 3 and 4, and I want 4 different card faces, each a different color with the corresponding number on the face. So the page will load with face 1 showing and clicking on button 1 will do nothing, but clicking on button 3 will flip to a face showing the number 3 and so on etc etc. Any ideas?

• javascript
• css
• css-transitions

• If you want it CSS-only, that's going to require a lot of otherwise unnecessary markup. With a JavaScript solution (that's still using CSS 3D transforms and CSS transitions) it gets a lot easier. – Ana Commented Mar 11, 2013 at 18:34

1 Answer 1

Simple solution

Start with the same approach as in the online example you mentioned in the question, but before starting the rotation, replace the contents of the "back side" with the contents of the element you want to rotate into view.

The contents of each element should be stored separately in the HTML, and retrieved when needed.

<div class="container">
    <div class="card">
        <div class="face face1"></div>
        <div class="face face2"></div>
    </div>

    <ul class="store">
        <li>
            <div class="content content1">1</div>
        </li>
        <li>
            <div class="content content2">2</div>
        </li>
        <li>
            <div class="content content3">3</div>
        </li>
        <li>
            <div class="content content4">4</div>
        </li>
    </ul>
</div>

jQuery demo

The demo should work fine in all recent versions of Firefox, Safari, and Chrome.

It looks like IE10 doesn't fully support the backface-visibility property (with or without the -ms- prefix). This prevents both the demo and the online example from working properly in IE10.