-webkit-transform如何在保留translate3d（）的同時更改rotate（）？

Question

我正在做的是在元素上運行css3動畫的同時更改元素的translate3d變換。但是，當我嘗試這樣做時，似乎動畫會在更新動畫之前每次重置變換，以使翻譯始終爲（0,0,0）。我希望有動畫運行，仍然能夠將其與JavaScript的如翻譯：

element.style.webkitTransform='translate3d(100px, 30px, 0px)'; 

我知道這將有可能通過使用第二包含分區設置翻譯上，而內部的div運行動畫，但我希望能夠只使用一個div。你知道如何做到這一點？

這是我的CSS，因爲它代表：

.class{ 
    width:32px; 
    height:32px; 
    position:absolute; 
    background: transparent url('./img/sprite.png'); 
    background-size:100%; 
    -webkit-transform: translate3d(48px, 176px, 0px); 
    -webkit-transition-property: -webkit-transform; 
    -webkit-transition-duration: 100ms; 


    -webkit-animation:spin .75s infinite linear; 
} 

@-webkit-keyframes spin { 
    0% { -webkit-transform:rotate(0deg); } 
    100% { -webkit-transform:rotate(360deg); } 
} 

Answer 1

可以將多個轉換功能與空間：

-webkit-transform: translate3d(48px, 176px, 0px) rotateY(30deg) rotateX(10deg);