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

Question

我想使用简单的 javascript 和 CSS 在 DIV 上创建卡片翻转效果(与 webkit 转换和 3d 转换相同)，无需库或插件。我怎样才能做到这一点？由于大多数 CSS3 属性都适用于 webkit 浏览器。大多数 javascript 解决方案都使用像 jquery 及其插件这样的库。我正在寻找一种不使用任何库但仅使用 javascript/CSS 并且仍然可以跨浏览器工作的解决方案。

如有任何帮助，我们将不胜感激。

问候，马尼谢卡瓦特

Answer 1

CSS3 中的 3d 变换目前仅适用于 webkit 浏览器。抱歉 - 如果不使用诸如 cssSandpaper ( http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ ) 之类的 JS polyfill，则无法在其他浏览器中执行此操作。

但不推荐这样做，因为它会导致加载 JS 版本时性能严重下降。

3d 变换和关键帧动画仍然是 CSS3 规范的(相当)全新的功能，因此仅在最新的浏览器(safari、chrome)中采用。如果您想要一个不需要 javascript 的跨浏览器解决方案，您将不得不搁置几年。