Question

我使用翻译2D翻译动画。但我想强制执行硬件加速，因此使用translate3d()。这是我的CSS：

.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％）时一切正常。我不确定为什么这不起作用，因为浏览器开发工具不会发现任何错误

Answer 1

根据Mozilla Developer Networks。

^{的 TZ} 是表示翻译向量的z分量。它不能是<percentage>值;在那种情况下的财产包含变换的内容被视为无效。

Demo （已使用px）

Answer 2

由于您在评论中询问响应性，因此会采用以下方式：

没有太多支持（真正的工作支持），但你应该能够使用vh：

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

现在，FF处理好了，Chrome允许你使用它（不会破坏），但不会计算好。

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

2 个答案: