翻译（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）中的百分比值不起作用

回答

相关问题