-webkit-transform, how can I change rotate () while saving translate3d ()?

Question

What I want to do is change the translate3d transform of the element, and the css3 animation works on the element. However, when I try to do this, it seems that the animation resets the transformation every time before updating the animation, so the translation is always (0,0,0). I want the animation to work and still be able to translate it using javascript, for example:

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

I know that it would be possible using the second containing div to set the translation, while the inner div starts the animation, but I would like to be able to use only one div, if possible. Do you know how to achieve this?

This is my css as it stands:

 .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

You can combine several conversion functions with a space:

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