CSS3：transform属性在Chrome中无法正常工作 [英] CSS3: transform property not working as expected in chrome

问题描述

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

我认为 -webkit-transform-origin：50％100％; 不能在chrome或其工作但不能按预期工作

演示Jsfiddle

  #flyDiv {
 width：720px; 
 height：420px; 
 transform-origin：50％100％; 
透视：300; 
 transform：perspective（300px）rotateX（15deg）; 
 -webkit-transform：perspective（300px）rotateX（15deg）; 
} 
  

解决方案

..这是硬件问题，我已经检查了许多计算机，并发现他们是显卡的pc他们是一个谁可以运行他们顺利，因为他们硬件加速 ..否则斜率不同bcoz它的软件加速 ..

只是检查ur pc config由 chrome：// gpu 在地址栏中，u会找到diff

...

下面的图片是其未按预期运行的图片：

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

I am trying to achieve the below thing ..And its working pretty well in firefox but the same css

working in chrome is somewhat like this shown below

I think -webkit-transform-origin: 50% 100%; doesnt work in chrome or its working but not as expected

Demo Jsfiddle

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

解决方案

Probably I have found an error ..This is hardware issue I have checked in many computers and found that pc in which their are graphic cards present they are the one who can run them smoothly as they are hardware accelerated ..Otherwise the slantness differs bcoz its software accelerated..

just check ur pc config by chrome://gpu in address bar and u will find the diff

Following image is that in which its running fine...

Following image is that in which its not running as expected...

Anyways Thanks for your answers and comments ..One favour plz confirm me this by checking if possible ..Thanks

这篇关于CSS3：transform属性在Chrome中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！