css3 transform過渡抖動問題


 

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 */

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM