具有硬件加速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 translation3d將x設置為200，將y設置為50，將z設置為5 ...

Answer 1

您必須為translate3d參數指定px單位：

#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