带有硬件加速css的画布

Question

我尝试使用带有css3硬件的画布，并使用以下代码加速：

#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;

}

演示和代码在这里：http://jsbin.com/yepigu/6/edit?css,output

但什么都没发生。为什么？如您所见，我用css translate3d将x到200，y到50，z到5.

Answer 1

必须为您的px参数指定translate3d单元：

#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