Холст с аппаратным ускорением 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

Но ничего случилось. Зачем? Как вы можете видеть, что я положил х 200, у 50, а г до 5 с помощью CSS translate3d ...

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