翻转div在Chrome中无法正常工作

Question

我在谷歌浏览器的css帮助下面临使用flip div的问题。 参考网站为here。

它在Mozilla上运行正常，但在某些版本的Chrome上存在问题。 左侧图像工作正常但右侧图像无法正常工作。

图片示例是

您还可以查看图片以查看确切的问题。

由于

Answer 1

在你的CSS中，你有标签，例如

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

复制它们并应用它们的前面

  -webkit-

所以你最终会得到

 .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    position: relative;
}

WebKit是Google Chrome和Safari的渲染引擎。其他浏览器都有自己的，支持使用所有浏览器引擎可能是一种很好的做法。

.flipper {
    transition: 0.6s; // Firefox 16+, IE10+, Opera 12.5+
    transform-style: preserve-3d;

    -webkit-transition: 0.6s;  // Chrome & Safari 3.5+
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;  // Firefox 3.5 - 15
    -moz-transform-style: preserve-3d;

    -ms-transition: 0.6s;  // IE9
    -ms-transform-style: preserve-3d;

    -o-transition: 0.6s;  // Opera 10.5-12
    -o-transform-style: preserve-3d;

    position: relative;
}

Answer 2

您需要的只是拥有完整的CSS供应商前缀。这是一个有用的工具prefixr，您可以完全免费地使用它。