2

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

Firefox 中的预期结果

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

Chrome 中的屏幕截图

我认为-webkit-transform-origin: 50% 100%;在 chrome 或它的工作中不起作用，但不像预期的那样

演示 Jsfiddle

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

2 回答 2

2

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

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

下图是它运行良好的图像... 硬件加速PC

下图是它没有按预期运行的图像...... 软件加速PC

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

于 2013-08-05T06:09:11.373 回答
0

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

并且您可以使用-webkit-transform-origin: 50% 100%;或仅使用来自 LEA VEROU 的用户 prefixfree

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/

于 2013-08-03T09:25:50.567 回答