css - translate(x,y,z) 中的百分比值不起作用

Question

我有使用 translate 和 2D translate 的动画。但我想强制执行硬件加速，因此使用了 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 中，当我刚刚使用 translate(0%,110%) 时一切正常。我不确定为什么这不起作用，因为浏览器开发工具没有发现任何错误

Answer 1

根据 Mozilla Developer Networks .

^tz Is a representing the z component of the translating vector. It can't be a <percentage> value; in that case the property containing the transform is considered invalid.

Demo (使用 px )