卡翻转效果使用CSS3旋转，但有多个面取决于按钮按下

Question

所以我需要创建一个几乎完全像这样的翻转图像。

但不同的是，如果我想要几个按钮，每个按钮翻转到一个特定的脸。假设我想要4个按钮分别标记为1,2,3和4，我想要4个不同的牌面，每个牌面都有不同的颜色和相应的数字。所以页面加载时显示的是脸1，点击按钮1什么都不会做，但点击按钮3会跳转到脸3，以此类推。什么好主意吗?

Answer 1

简单的解决方案

使用与问题中提到的在线示例相同的方法开始，但在开始旋转之前，将"背面"的内容替换为您想要旋转到视图中的元素的内容。

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

<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中正常工作。

看起来IE10不完全支持backface-visibility属性(带或不带-ms-前缀)。这将阻止演示和在线示例在IE10中正常工作。