-webkit-transform как я могу изменить rotate () при сохранении translate3d ()?

Я хочу изменить преобразование translate3d элемента, пока на элементе выполняется анимация css3. Однако, когда я пытаюсь сделать это, кажется, что анимация сбрасывает преобразование каждый раз прямо перед обновлением анимации, так что перевод всегда равен (0,0,0). Я хочу, чтобы анимация работала, и я все еще могу переводить ее с помощью javascript, например:

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

Я знаю, что можно было бы использовать второй содержащий div, чтобы установить перевод, пока внутренний 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); }
}