CSS3篇--rotate/translate等导致字体模糊_css字体旋转后虚化

小知识点：rotate/translate等导致字体瞬间模糊又还原，如何处理

用css3写了一个 旋转字体图标的方法，很简单的代码，如下：

//css
.icon-down {
    font-size: 18px;
    color: #19bd9b;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transform: rotate(0);
    -webkit-transform: rotate(0);
}
.icon-down.on {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}
 
//html
<i class="iconfont icon-down"></i>
 
//js
$(".select-box").click(function() {
    var t = $(this);
    var e = t.find(".select-option").css("display");
    if("none" == e){
        $(".select-box .select-option").css("display","none");
        $(".select-box .select-value > i").removeClass("on");
        t.find(".select-option").slideDown();
        t.find(".select-value > i").addClass("on");
    }else{
    	t.find(".select-option").slideUp();
    	t.find(".select-value > i").removeClass("on");
    }
});

上面代码运行后，发现在与该代码毫无关系的一个节点的字体变模糊了一下，一秒后又还原了，作为强迫症患者，这肯定不能忍，后来发现是这句导致

这句就只添加了名为on的class,其中只增减了一句rotate的代码，搜了搜，不只我一个人遇到了这个问题，好吧，css3的问题，按照大家的办法试了下。

1，将宽高设为了偶数，不行

2，增加css backface-visibility:hidden，不行。

3，translate里的参数用固定值不用百分比这些，我用rotate，这用不着。

4，给字体强制透明度，weight,并提高优先级，不行。

后来试着在代码里加了一句transform：translate3d(0,0,0)，然后就解决了。。。

.icon-down {
    display: block;
    font-size: 18px;
    color: #19bd9b;
     transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    transform:translate3d( 0, 0, 0);
    -webkit-transform:translate3d( 0, 0, 0);
}
.icon-down.on {
    transform: rotate(-180deg);
    -webkit-transform: rotate(0);
    transform:translate3d( 0, 0, 0);
    -webkit-transform:translate3d( 0, 0, 0);
}

后来发现将translateZ(0)代替 translate3d(0,0,0)也可以解决。