CODEWITHSUNDEEP
csswebkittransformtranslate-animation
Samuel Elliott Hanson
Samuel Elliott Hanson

Reputation: 91

-webkit-transform how can I change rotate() while preserving translate3d()?

What I am looking to do is change the translate3d transform of an element while a css3 animation is running on the element. When I try to do this, however, it seems that the animation resets the transform every time right before updating the animation such that the translation is always (0,0,0). I wish to have the animation running and still be able to translate it with javascript such as:

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

I know it would be possible by using a second containing div to set the translation on while the inner div runs the animation, but I would like to be able to just use one div if possible. Do you know how to achieve this?

This is my css as it stands:

.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); }
}

Upvotes: 6

Views: 6171

Answers (1)

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

You can concatenate several transformation functions with a space:

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

Upvotes: 4

Related Questions