percentage values in translate(x,y,z) not working

Question

I had animations using translate a 2D translate. But I would like to enforce hardware acceleration and hence used translate3d(). Here is my 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");
});

Now in the CSS when i just used translate(0%,110%) everything worked fine. I'm not to sure why this isn't working as the browser dev tools dont pick up any errors

Answer 1

As per 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 (Used px)

Answer 2

Since you are asking about responsiveness in your comments, that would be the way:

There is not much support (real working support), but you should be able to use vh:

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

Right now, FF handles that ok, Chrome allows you to use it (won't break) but won't calculate ok.