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; 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浏览器就模糊了...

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

 

附上源代码:

。。。。

 

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

posted @ 2015-03-23 15:52  surfaces  阅读(4558)  评论(0编辑  收藏  举报