csstransformtranslate3d

Display div in right side using translate3d

I want to display a div in right side exactly what the following CSS does but using translate3d

div {
   position: absolute;
   right: 0;
   top: 0;
}

I have tried the following but its working only in Chrome.

div {
    -webkit-transform: translate3d(100vw,0,0);
    -moz-transform: translate3d(100vw,0,0);
    -o-transform: translate3d(100vw,0,0);
    transform: translate3d(100vw,0,0);
}

UPDATE Please check the fiddle. http://jsfiddle.net/7LLbu/ I need the same toggle function using translate3d.

Kindly help me fix this.

Solution

  • This works fine;

    .translate3d(~"calc(100vw - 276px)", 0, 0);