CSS3篇--rotate/translate等导致字体模糊

小知识点：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)也可以解决。