Question

我正在尝试实现以下的东西..它在firefox中运行得相当好但是同样的css

Expected Result in Firefox

在chrome中工作有点像下面显示的

Screenshot in 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);
}

Answer 1

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

不同

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

以下图片就是其正常运行...... Hardware Accelerated PC

以下图片是未按预期运行的图片 Software Accelerated PC

无论如何感谢您的回答和评论..一个人的帮助PLZ通过检查是否可能确认我..谢谢

Answer 2

您没有以正确的方式执行此操作，您必须在父元素上使用 transform-style：preserve-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/

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

2 个答案: