CSS3：transform 属性在 chrome 中未按预期工作答案

【问题标题】：CSS3: transform property not working as expected in chromeCSS3：transform 属性在 chrome 中未按预期工作
【发布时间】：2013-08-05 14:09:11
【问题描述】：

我正在尝试实现以下目标..它在 Firefox 中运行良好，但 css 相同

在 chrome 中工作有点像下图所示

我认为 -webkit-transform-origin: 50% 100%; 在 chrome 中无法使用，或者无法正常使用，但效果不如预期

Demo Jsfiddle

#flyDiv {
    width:720px;
    height:420px;
    transform-origin: 50% 100%;
    perspective: 300;
    transform: perspective(300px) rotateX(15deg);
    -webkit-transform: perspective(300px) rotateX(15deg);
}

【问题讨论】：

为我工作（Chrome 28）
使用 Chrome Canary 为我工作
在 Chrome versino 28.0.1500.71 m JSBin 版本中看起来不错 - jsbin.com/opejoq/1
是的，滚动有效，但 div 的形状与 Firefox 中的预期不同
我的 chrome 版本是 28.0.1500.95 m

标签： jquery css css-transforms

【解决方案1】：

可能我发现了一个错误..这是我在许多计算机中检查过的硬件问题，发现它们是图形卡的电脑，它们可以顺利运行它们，因为它们是hardware accelerated ..否则倾斜度不同，因为它的software accelerated..

只需在地址栏中通过chrome://gpu 检查您的电脑配置，您就会发现差异

下面的图片是它运行良好的图片...

以下图片是其未按预期运行的图片...

无论如何，感谢您的回答和 cmets ..请帮我确认一下，如果可能的话，请检查一下..谢谢

【讨论】：

【解决方案2】：

您没有以正确的方式进行操作，您必须在父元素上使用 transform-style: preserve-3d 然后才能转换子元素。由于您使用 3d 以获得更好的性能，您将需要 backface-visibility: hidden;

您可以使用-webkit-transform-origin: 50% 100%; 或仅使用来自 LEA VEROU 的无用户前缀

http://leaverou.github.io/prefixfree/

父母：

 section#transform3d{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;       
        }

孩子

#flyDiv {
    width:720px;
    height:420px;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    /*  -webkit-transition: -webkit-transform 10s; 
    -webkit-transform-origin: 50% 100%; */
    -webkit-transform: perspective(300px) rotateX(15deg);
    -moz-transform: perspective(300px) rotateX(15deg);
    transform: perspective(300px) rotateX(15deg);
}

演示：http://jsfiddle.net/kougiland/W9uPE/6/

在此处阅读更多信息：http://www.w3.org/TR/css3-transforms/

【讨论】：