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

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