如何在保留translate3d()的情况下更改-webkit-transform中的rotate()？

Question

我想要做的是在css3动画运行时更改元素的translate3d变换。然而，当我尝试这样做时，似乎动画每次在更新之前都会重置变换，导致平移始终为（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); }
}

- Samuel Elliott Hanson

Answer 1

您可以使用空格将多个转换函数连接起来：

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

- Alexander Pavlov