β

关于chome下transform的3D效果失效的问题

颓废小魔-web前端 417 阅读

不知道有多少人跟我一样,在用chrome测试CSS3的3D效果是失效的,

-webkit-transform-style: preserve-3d;
  -webkit-transform: perspective(600px) rotateY(-75deg);

这是一段CSS3的CSS代码,我们想要的效果是这样的:

但是,我再chrome测试的时候却出现这样的:

当我在Safari测试的时候又是正常了,这让我郁闷了好久,甚至把chrome卸载后重装都没用,翻倍了百度和谷歌都找不到原因,后来哥厚脸无耻的向 膘叔借了VPN,翻墙用谷歌查阅资料了(谷歌被墙的太厉害了,做IT的还是自己买一个VPN吧),终于找到原因所在了,电脑配置太差,浏览器自动关闭3D硬件加速,在chrome下输入chrome://gpu/ 我们可以看到这样的

看到3D CSS那块红色的,硬件加速未开启。
解决办法:在浏览器属性中加入 –enable-webgl –ignore-gpu-blacklist 移除黑名单就好。
重启下浏览器,3D效果马上体现了..泪奔啊~~~

您可能喜欢的相关话题
作者:颓废小魔-web前端
原文地址:关于chome下transform的3D效果失效的问题, 感谢原作者分享。

发表评论