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/