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)异曲同工）；不过 此时；元素被像素化；字体变模糊；

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<style> .parent{  position:relative; text-align:center; width: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浏览器就模糊了...

?

1 2 3 4 5 6

.center{ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

　

附上源代码：

。。。。

　

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