CSS3：转换属性在chrome中无法正常工作

我正在努力实现以下的东西..它在Firefox中工作得很好，但同样的CSS

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

Answer 1

可能我发现了一个错误..这是我在许多计算机上检查过的硬件问题，发现他们是显卡的PC就是那些可以顺利运行它们的人，因为它们是hardware accelerated否则倾斜度不同bcoz它的software accelerated ..

只需通过chrome://gpu在地址栏中查看你的pc配置，你就会找到差异

以下图片是其中运行良好的…

下面的图像是其未按预期运行的…

无论如何感谢您的回答和评论..一个青睐plz通过检查是否可能确认我..谢谢

Answer 2

你没有以正确的方式做到这一点你必须使用变换样式：在父元素上保留-3d然后你可以变换孩子。 而且由于你使用3d来获得更好的性能，你需要背面可见性：隐藏;

你必须使用-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/