CSS3 преобразования вращаться без перекрывая преобразования переводить

Question

Скажем, у меня есть элемент, который уже имеет транслят применяется к нему:

<div class="elem"></div> 

.elem { transform: translate(50%,0); } 

А теперь я хочу, чтобы повернуть один и тот же элемент, используя дополнительный класс. Так что теперь HTML и CSS выглядит следующим образом:

<div class="elem rotate"></div> 

.elem { transform: translate(50%,0); } 
.rotate { transform: rotateZ(20deg); } 

Проблема возникает, когда вращение не добавляется к существующим переводить, а переопределения и сводит на нет его.

Как сохранить оригинальный перевод без наворотов моего кода, как я сделал ниже:

.elem { transform: translate(50%,0); } 
.rotate { transform: translate(50%,0) rotateZ(20deg); } 

Вот скрипка: https://jsfiddle.net/timothyzhu/vm84vsj7/

Спасибо, ребята.

Answer 1

Значение свойства transform на элементе переопределит любое другое свойство transform, установленное ранее на том же элементе.

Одним из распространенных шаблонов в этой ситуации является использование JS для хранения значения, а затем применение преобразования с учетом предыдущего свойства преобразования (также потому, что важна последовательность преобразований !!).

В вашем сценарии, обходной путь может создать упаковочную DIV только для вращения (here's a complicated example смотреть на него с DEV-инструментами),

fiddle