画布元素3d旋转

Question

我们可以像这样旋转div

<div class="one">
    <div class="two">
        <div class="tree"></div>
    </div>
</div>

div{width:100px;
    height:100px;}
.tree{
    background-color:red}
.one{
    -webkit-perspective:1000;

}
.two{

       -webkit-transform-style:preserve-3d;
    -webkit-transition: all 2s ease
}
.one:hover>.two{

    -webkit-transform:rotateY(180deg)

}

但有没有办法在画布上绘制的元素上实现相同的效果？