html - flip div 在 Chrome 中无法正常工作

Question

我在 Google Chrome 浏览器的 css 帮助下使用 flip div 时遇到了问题。 引用网站是here .

它在 Mozilla 上工作正常，但在某些版本的 Chrome 上有问题。 左侧图像工作正常，但右侧图像工作不正常。

图片示例是

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

谢谢

Answer 1

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

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

    position: relative;
}

复制它们并在它们前面应用 following

  -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;
}