翻譯（x，y，z）中的百分比值不起作用

我有使用翻譯2D翻譯的動畫。但我想執行硬件加速，因此使用translate3d()。這裏是我的CSS：翻譯（x，y，z）中的百分比值不起作用

.hand { 
    position:fixed; 
    top:-60%; 
    left:50%; 
    width:20%; 
    margin-left:-10%; 
} 

.handmovedown { 
    transform: translate3d(0%,110%,0%); 
    -webkit-transform: translate3d(0%,110%,0%); /** Safari & Chrome **/ 
    -o-transform: translate3d(0%,110%,0%);/** Opera **/ 
} 

.objecttransition { 
    transition: all 0.5s linear; 
    -webkit-transition: all 0.5s linear; /** Chrome & Safari **/ 
    -moz-transition: all 0.5s linear; /** Firefox **/ 
    -o-transition: all 0.5s linear; /** Opera **/ 
}

HTML：

<img id='Hand' class="hand objecttransition" src="css/images/hand.gif">

JS：

$(document).ready(function(){ 
    $("#Hand").addClass("handmovedown"); 
});

現在，當我只是用翻譯CSS（0％，110％）的一切工作得很好。我不確定爲什麼這不起作用，因爲瀏覽器開發工具不會提取任何錯誤

來源

2014-01-17 user481610

根據Mozilla Developer Networks。

^TZ 是一個表示所述平移矢量的z分量。它不能是<percentage>的值;在這種情況下，包含變換的屬性被視爲無效。

Demo（二手px）

來源

2014-01-17 10:04:17

我可以問，那麼如何處理不同的屏幕尺寸？由於使用px意味着不同設備上的不同定位。我會怎麼做，然後製作動畫一次以適應不同的移動設備屏幕？ – user481610

@Roberto使用jQuery來設置對象的動畫效果，方法是使用'position：absolute;'對象並使用'.animate（）'調整元素的位置' –

感謝您的回覆。我不想使用.animate的原因是因爲這是一個phonegap應用程序，而且.animate（）在phonegap中不能很好地工作 – user481610

既然你問你的意見反應，這將是這樣：

沒有太多的支持（實際工作的支持），但你應該可以使用vh：

transform: translate3d(10%,20%,50vh);

現在，FF處理好了，Chrome允許你使用它（不會中斷），但是不會計算好的。

來源

2014-01-17 15:37:13 vals

謝謝你的答案。我會讀一讀這個！ – user481610

翻譯（x，y，z）中的百分比值不起作用

回答

相關問題