css - -webkit-transform如何在保留translate3d()的同时更改rotate()？

我要做的是在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); }
}

最佳答案

您可以将多个转换函数与一个空格连接起来:

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

关于css - -webkit-transform如何在保留translate3d()的同时更改rotate()？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8143894/