transform:translateZ() 字体模糊问题 父类重返Z轴平面

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%);
}

　

附上源代码：

。。。。

　

http://www.cnblogs.com/surfaces/