css3的transform缩放在IE浏览器下有抖动如何解决?

css3的transform缩放在IE浏览器下有抖动怎么解决?因为浏览器的兼容问题,transform: scale();缩放在IE浏览器下会有过渡抖动的问题,那么我们有什么办法可以解决吗?接下来小编就与大家一起来探讨一下。

transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转

如:transform: scale(1.2);
换成:transform: scale(1.2) rotate(0.1deg);

transform:translate();偏移会使图片或文字变得模糊

transform偏移还会使图片或文字失帧,变得模糊,可以使用clac解决

如:transform:translate(-50%);
换成:transform: translate(calc(-50% + 1px));

clac是css3的计算属性,可以使用在样式中的计算,clac语法:clac(数 + 数),注:这里“运算符号”两端的空格不能少

transform存在兼容性,IE浏览器只能兼容到IE 9,兼容写法:
transform:scale(1.2) rotate(0.1deg);
-ms-transform:scale(1.2) rotate(0.1deg);        /* IE 9 */
-moz-transform:scale(1.2) rotate(0.1deg);       /* Firefox */ 
-webkit-transform:scale(1.2) rotate(0.1deg);     /* Safari 和 Chrome */ 
-o-transform:scale(1.2) rotate(0.1deg);        /* Opera */

以上就是关于transform缩放抖动的解决方案介绍啦,上述示例具有一定的借鉴价值,有需要的朋友可以参考,希望对大家学习CSS3的使用有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。

dawei

【声明】:邵阳站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。