Card Flip effect using CSS3 rotateY but with multiple faces depending on button press?

Question

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?

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.