带有硬件加速 css 的画布答案

【问题标题】：Canvas with hardware accelerated css带有硬件加速 css 的画布
【发布时间】：2015-03-16 00:18:06
【问题描述】：

我尝试使用带有 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...

【问题讨论】：

标签： javascript css canvas hardware-acceleration

【解决方案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

【讨论】：