-webkit-transform, как я могу изменить rotate () при сохранении translate3d ()? - PullRequest
Новая
       38

-webkit-transform, как я могу изменить rotate () при сохранении translate3d ()?

5 голосов
/ 16 ноября 2011

Я хочу изменить трансформацию translate3d элемента, пока на нем выполняется анимация css3.Однако, когда я пытаюсь сделать это, кажется, что анимация сбрасывает преобразование каждый раз непосредственно перед обновлением анимации, так что перевод всегда (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 Ответ

2 голосов
/ 15 декабря 2011

Вы можете объединить несколько функций преобразования с пробелом: 

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