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

时间:2011-11-15 22:12:52

标签: css3 webkit transform translate-animation

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

1 个答案:

答案 0 :(得分:2)

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

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