javascript - 使用 CSS3 rotateY 的卡片翻转效果，但根据按钮按下有多个面孔？

Question

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

但不同之处在于，如果我想要多个按钮并且每个按钮都会翻转到特定的面孔。假设我想要 4 个标记为 1、2、3 和 4 的按钮，并且我想要 4 个不同的卡片面，每个面都有不同的颜色和对应的数字。因此，页面将加载并显示面 1，单击按钮 1 将不会执行任何操作，但单击按钮 3 将翻转到显示数字 3 的面，依此类推。有什么想法吗？

Answer 1

简单的解决方案

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

每个元素的内容应单独存储在 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 中无法正常工作。