javascript - Card Flip effect using CSS3 rotateY but with multiple faces depending on button press? - Stack Overflow

admin管理员组

文章数量:1316363

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

Share Improve this question Follow edited Mar 12, 2013 at 1:42 Matt Coughlin 18.9k33 gold badges4747 silver badges5959 bronze badges asked Mar 11, 2013 at 16:52 Louden100Louden100 5322 silver badges55 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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.

本文标签：