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

【问题标题】：Card Flip effect using CSS3 rotateY but with multiple faces depending on button press?使用 CSS3 rotateY 的卡片翻转效果，但根据按钮按下有多个面？
【发布时间】：2013-07-29 20:38:07
【问题描述】：

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

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

【问题讨论】：

如果你只想要 CSS，那将需要大量不必要的标记。使用 JavaScript 解决方案（仍然使用 CSS 3D 转换和 CSS 转换）会变得容易得多。

标签： javascript css css-transitions

【解决方案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 中正常工作。

【讨论】：

我在 Chrome 27 中看到了翻转效果。
@LeeTaylor：感谢您指出这一点！我更新了演示，它现在应该可以在所有最新版本的 Firefox、Chrome 和 Safari 中正常工作。对于转换转换，我忽略了为属性和值添加浏览器前缀。
@gath，翻转不稳定，不是很一致。