卡Flip效果使用CSS3旋转，但有多个脸，取决于按钮按下？ [英] Card Flip effect using CSS3 rotateY but with multiple faces depending on button press?

问题描述

因此，我需要创建一个类似于此的翻转图片。

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

但是区别是如果我想要几个按钮，每个人都翻转到一个特定的脸。假设我想要4个按钮标记为1，2，3和4，我想要4个不同的卡面，每个都有不同的颜色与对应的数字在脸上。所以页面将加载面孔1显示，点击按钮1将不会做任何事情，但点击按钮3将翻到一个面孔显示数字3等等任何想法？

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?

推荐答案

简单解决方案

href =http://desandro.github.com/3dtransforms/examples/card-01.html =nofollow>在线示例您在问题中提到，但在开始旋转之前，请更换内容

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.

每个元素的内容应单独存储在HTML中，并在检索时检索。需要。

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演示

该演示应该在所有最新版本的Firefox，Safari和Chrome中正常工作。

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

看起来IE10不完全支持 backface-visibility 属性（有或没有 -ms- prefix）。这会阻止演示和在线示例在IE10中正常工作。

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.

这篇关于卡Flip效果使用CSS3旋转，但有多个脸，取决于按钮按下？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！