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

Question

在 Google Chrome 中的 css 的帮助下，我遇到了关于使用翻转 div 的问题。参考网站在这里。

它在 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 供应商前缀。这是一个有用的工具前缀，您可以完全免费使用它。