CODEWITHSUNDEEP
javascriptcsscanvashardware-acceleration
dert detg
dert detg

Reputation: 303

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...

Upvotes: 0

Views: 243

Answers (1)

alexpods
alexpods

Reputation: 48495

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

Upvotes: 1

Related Questions