Javascript 使用CSS3 rotateY的卡片翻转效果，但有多个面，具体取决于按钮按下情况？

所以我需要创建一个翻转图像，几乎完全像

---

但不同的是，如果我想要几个按钮，每个按钮都翻转到一个特定的脸上。假设我想要4个标签为1、2、3和4的按钮，我想要4个不同的卡片面，每个卡片面都有不同的颜色和相应的数字。因此，页面将加载面1，单击按钮1将不起任何作用，但单击按钮3将翻转到显示数字3等的面。有什么想法吗？

简单解决方案

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

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

1.


2.


3.


4.

该演示在Firefox、Safari和Chrome的所有最新版本中都能正常工作

---

IE10似乎不完全支持

背面可见性

属性（带或不带

-ms-

前缀）。这会妨碍演示和在IE10中正常工作。

如果只想使用CSS，则需要大量不必要的标记。有了JavaScript解决方案（仍然使用CSS 3D转换和CSS转换），它变得容易多了。我在Chrome 27中看到了翻转效果。@Leetylor:谢谢你指出这一点！我更新了演示，现在它在所有最新版本的Firefox、Chrome和Safari中都可以正常工作。对于转换转换转换，我忽略了为属性和值添加浏览器前缀。@gath，翻转不稳定，不太一致。