Search code examples
javascriptcsscanvashardware-acceleration

Canvas with hardware accelerated css

I try to use canvas with css3 hardware accelerated with this code:

#canvas{border:1px solid green;

  background: #ccc;
  text-align: center;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(200,50,50);
  margin-left:400px;

}

Demo and Code is here: http://jsbin.com/yepigu/6/edit?css,output

But nothing happend. Why? As you can see I put x to 200, y to 50, and z to 5 with css translate3d...

Solution

  • You must specify px units for your translate3d arguments:

    #canvas{
  border:1px solid green;
  background: #ccc;
  text-align: center;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000px;
  -webkit-transform: translate3d(200px,50px,50px);
  margin-left:400px;
}

    http://jsbin.com/cizacajuxu/2/edit?css,output