如何使用JavaScript在DIV上创建卡片翻转效果

Question

如何使用JavaScript在DIV上创建卡片翻转效果

5

我想使用简单的javascript和CSS而不使用库或插件来创建卡片翻转效果（与webkit转换和3D变换相同），并使其跨浏览器兼容。由于大多数CSS3属性适用于webkit浏览器，而且大多数javascript解决方案都使用了像jquery和其插件这样的库。请问我该如何实现呢？

任何帮助将不胜感激。

谢谢， manishekhawat

- manishekhawat

3

跨浏览器做到这一点确实很困难。 - Daniel A. White

4

你最终会重新创建现有的库。使用库有什么问题？ - Octavian Helm

1

@OctavianDamiean，使用库没有问题，只是客户不想要任何外部库，一切都要自己制作。 - manishekhawat

3

你觉得为什么jQuery不能够跨浏览器使用？ - Octavian Helm

4

我写了一个卡牌翻转游戏，使用jQuery和这个插件（http://lab.smashup.it/flip），在所有桌面浏览器上都完美运行，甚至包括IE6，也可以在移动设备上使用。 - Dan Blows

显示剩余5条评论

2个回答

2

CSS3中的3D转换目前只适用于Webkit浏览器。很抱歉 - 在其他浏览器中没有办法做到这一点，除非使用JS polyfill，例如cssSandpaper（http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/）。

不过这并不推荐，因为加载JS版本会导致性能严重下降。

3D转换和关键帧动画仍然是CSS3规范的一个相对较新的功能，因此只有最新的浏览器（Safari，Chrome）采用。如果您想要一个跨浏览器的解决方案而不需要JavaScript，您需要等待几年。

- 1nfiniti

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2719890 · Accepted Answer

如何实现：

CSS动画非常有趣；它们的美妙之处在于通过许多简单的属性，您可以创建从优雅的淡入到令人惊叹的皮克斯效果。介于某个CSS效果之间的是CSS翻转效果，即给定容器的正面和背面都有内容。本教程将向您展示如何以尽可能简单的方式创建该效果。

HTML结构：

要实现这种两面效果的HTML结构与您所期望的一样：

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

有两个内容窗格，"front" 和 "back"，正如您所期望的那样，但还有两个包含元素，其CSS解释了它们的特定角色。还要注意ontouchstart部分，它允许在触摸屏上交换窗格。

CSS

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

这里是该过程的粗略概述：

- 外部容器设置整个动画区域的透视效果。 - 内部容器是实际翻转的元素，当父容器被悬停时，它会旋转180度。在这里，您还可以控制过渡速度。将旋转角度更改为-180度可使元素以相反的方向旋转。 - 前面和后面的元素被绝对定位，以便它们可以“覆盖”在同一位置; 它们的背面可见性被隐藏，因此在动画期间不会显示翻转元素的背面。 - 前面的元素具有比后面的元素更高的z-index，因此前面的元素可能首先编码，但仍然显示在顶部。 - 后面的元素旋转180度，以充当后面。

就是这样！将这个简单的结构放置好，然后按照您的喜好为每个面进行样式设计！

CSS Flip Toggle 如果您希望元素仅通过JavaScript命令翻转，则简单的CSS类切换即可：

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{
    transform: rotateY(180deg);
}

将flip类添加到容器元素中，即可使用JavaScript翻转卡片--无需用户悬停。像这样的JavaScript注释：

document.querySelector("#myCard").classList.toggle("flip")就可以完成翻转！

CSS垂直翻转

执行垂直翻转与翻转轴和添加transform-origin坐标值一样简单。必须更新翻转的原点并将卡片旋转另一个方向：

.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* half of height */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }

您可以看到X轴被使用了，而不是Y轴。

所有的功劳归于开发者David Walsh，我只是复制了内容。