[密技]兩個解決CSS transform在chrome破圖+閃爍的方法

在chrome中使用CSS transform旋轉影像時可能會出現破圖+畫面閃爍的問題(在firefox則不會)

這可能是因為他沒有真正發揮到硬體(GPU)加速

這時有兩個解決方式

第一個，設定CSS：

.canvas1 {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}

設定完之後，圖片就回來了(但資源超出顯示卡負荷還是會有輕微破圖現象)

但是這樣旋轉到背面就看不見了，所以有第二個方法，設定CSS：

.canvas1   {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

}

可是這樣子怎麼旋轉？

我的做法是，將子元素設定為0，將父元素設定其他數字。

範例：
for (var ll = 0; ll < o3DListLength; ll++) {
        var canvasC = getByid("3DDiv" + ll).getElementsByClassName("cornerstone-canvas")[0];
        var canvas1 = getByid("3DDiv" + ll);
        canvasC.style.cssText += '-webkit-transform: translate3d(' + 0 + ', ' + 0 + ', 0);';
        canvas1.style.cssText += '-webkit-transform: translate3d(' + 1 + ', ' + 1 + ', 0);';

    }
然後再設定旋轉：
canvas1.style.transform = "rotateY(" + degerrX + "deg) rotateX(" + degerrY + "deg)";

這樣就可以正常旋轉且不會破圖+畫面閃爍了

參考網站：
用CSS开启硬件加速来提高网站性能（转）