> 웹 프론트엔드 > HTML 튜토리얼 > transform:rotate在手机上显示有锯齿的解决方案大全

transform:rotate在手机上显示有锯齿的解决方案大全

WBOY
풀어 주다: 2016-06-20 08:42:16
원래의
2086명이 탐색했습니다.

先来个兼容性说明,洗洗脑:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}

1.来自【作者:梦幻神化】的blog:

使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ(0)。例:-webkit-transform: rotate(5deg) translateZ(0);

作者说:不过使用iPad下的Safari打开网页,仍会有锯齿。

兼容:GPU加速是在IE9时才加入的

经过我测试,iPad已经没有锯齿了,应该是新版的Safari优化了这地方

2.来自【嗷嗷】的blog:

利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决。
这方案在电脑上反而会出问题。
新的方案rotate3d + border:1px solid transparent;,问题也算是解决了。
本来缩放图片是件不好的事,可是缩放图片在这里是故意的,大家选适合的方案在对应的场景使用吧,原本方案就没想着要在电脑上的浏览器上使用的

对于图片我目前看法:对于一些不重要的图片,比如:一些icon、logo等对于图片质量要求不高的图片使用1:1,对于头像、商品图片要求质量比较高的,选择1:2还是不错的

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿