translateZ()变糊
第一种情况：
当translateZ(m)中的 m设置为 非整数，1.5px 之类的，字体会模糊，但是不明显;和浏览器渲染，字体格式，或者操作系统有关，
这个 css中 只能尽量避免非整数的；js 中 用Math.floor(m)或者Math.cail(m)避免就好;
第二种问题
当设置有景深 perspective:number; 被运动元素 translateZ(m)中的 m设置 非 0 的情况下; m>0;整体背放大，距离你更近，反之，则反；（scale(m)异曲同工）；不过 此时；元素被像素化；字体变模糊；
<style>
.parent{ position:relative; text-align:center; 1000px; border:1px solid #333; margin:20px auto; height:500px;}
.child{
text-align: center;
margin: 10px auto;
white-space: pre;
height:65px;
line-height:65px;position:relative;
}
.font-size {
font-size: 1.8em;
}
.scale {
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
.perspective {
-webkit-transform: perspective(1200px) translateZ(700px);
-moz-transform: perspective(1200px) translateZ(700px);
-o-transform: perspective(1200px) translateZ(700px);
transform: perspective(1200px) translateZ(700px);
}
</style>
<div class='parent'>
<p class="child font-size">font-size: 1.8em</p>
<p class="child scale">transform: scale(1.8);</p>
<p class="child perspective">transform: perspective(1200) translateZ(700px);</p>
</div>
效果图：
解决办法
父类的元素 使用translateZ(-m)；重返Z轴平面;也就是说；
.childrens{ -webkit-transform:translateZ(23px) rotateX(-90deg); }
.father{-webkit-transform:translateZ(-23px);/*父类修复子类放大问题 导致子类的文字 内容锯齿化}
在hover 时候，也加个这个；可以消除 字体模糊；
.parent:hover{-webkit-transform:translateZ(-23px) rotateX(90deg); /* rotateX 之后 再次translateZ(-23px) 父类Hover 修复子类放大问题 导致子类的文字 内容锯齿化*/}
另外一个小技巧：translateZ(m)中。m 的参数 设置最好是 元素高度（行高也行）的一半，（上面这个:translateZ(23px)就是 line-height：46px的 一半高度）因为默认的 transform-origin:center center ;
另外常见的还有一个类似的 问题 算是第三个问题吧
css3的垂直居中 有时候导致垂直元素的字体模糊，尤其pc上，宽度不定，translate自身的一半，有时候 200.1234px，出现小数位，pc浏览器就模糊了...
.center{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
附上源代码：
。。。。