3

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

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

4

1 回答 1

9

简单的解决方案

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

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

于 2013-03-12T00:52:58.060 回答