零分杂记

在使用css3 transform：scale(1.2)时遇到一个问题，就是发现文本会抖动。大概就时文本会先变模糊、再变清晰。

经过测试，可以通过旋转来减少抖动的感觉。添加了rotate(0.1deg)后，文本变模糊，但不会再变回清晰。

我使用的场景，鼠标经过时，li放大一些以区分其他列表上的li。

CSS：

transform:  scale(1) translateZ(0) rotate(0deg);//鼠标未经过
transform:  scale(1.01) translateZ(0) rotate(0.1deg);//鼠标经过
/***动画时间***/
-webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);

虽还是不算满意，但也解决了闪了一下的感觉。就当文本模糊时经过的效果吧。

兼容性写法：

transform:scale(1.2) translateZ(0) rotate(0.1deg);
-ms-transform:scale(1.2) translateZ(0) rotate(0.1deg);　　　　    /* IE 9 */
-moz-transform:scale(1.2) translateZ(0) rotate(0.1deg);　　　    /* Firefox */
-webkit-transform:scale(1.2) translateZ(0) rotate(0.1deg);　    /* Safari 和 Chrome */
-o-transform:scale(1.2) translateZ(0) rotate(0.1deg);　　　　    /* Opera */