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

【问题标题】：-webkit-transform how can I change rotate() while preserving translate3d()?-webkit-transform 如何在保留 translate3d() 的同时更改 rotate()？
【发布时间】：2011-12-29 22:37:47
【问题描述】：

我要做的是在元素上运行 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); }
}

【问题讨论】：

标签： css webkit transform translate-animation

【解决方案1】：

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

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

【讨论】：