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

Question

所以我需要创建一个几乎与this完全相同的翻转图像。

但不同的是，如果我想要几个按钮，每个按钮翻转到特定的脸。假设我想要4个标记为1,2,3和4的按钮，我想要4个不同的卡面，每个面都有不同的颜色，脸上有相应的数字。因此，页面将加载面部1显示并单击按钮1将不执行任何操作，但单击按钮3将翻转到显示数字3的面部等等等任何想法？

Answer 1

简单解决方案

以与您在问题中提到的online example相同的方法开始，但在开始旋转之前，将“背面”的内容替换为要旋转到视图中的元素的内容。

每个元素的内容应单独存储在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 demo

该演示应该适用于所有最新版本的Firefox，Safari和Chrome。

看起来IE10并不完全支持backface-visibility属性（带或不带-ms-前缀）。这可以防止演示和online example在IE10中正常工作。