卡翻转效果使用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中正常工作.