CSS - добавить преобразование к элементу без удаления существующего

Question

Итак, у меня есть DIV, например:

<div class="rotate-90"></div> 

и CSS:

.rotate-90 
{ 
    transform: rotate(90deg); 
} 

, и я хочу добавить еще один класс ДИВ, названный «масштабно-2», как это:

<div class="rotate-90 scale-2"></div> 

.scale-2 
{ 
    transform: scale(2); 
} 

, но когда я пытаюсь объединить их, второй класс переопределяет первый, так что я получаю только масштабированный div и не вращается. Итак, как я могу объединить преобразования, не записывая код дважды или комбинируя коды классов?

Спасибо :)

Answer 1

Поскольку вы используете transform свойство снова и его главной предыдущей.

Вы можете использовать оба в одном преобразовании как этого

.rotate-90.scale-2 { 
    transform: rotate(90deg) scale(2); 
} 

Transform свойства следует использовать с префиксом, чтобы она работает во всех браузерах, как этого

.rotate-90.scale-2 { 
    transform: rotate(90deg) scale(2); 
    -moz-transform: rotate(90deg) scale(2); 
    -ms-transform: rotate(90deg) scale(2); 
    -webkit-transform: rotate(90deg) scale(2); 
    -o-transform: rotate(90deg) scale(2); 
} 

Answer 2

Transform-правила переопределить, как и любые другие правила.

Однако вы можете объединить трансформирует в одном правиле:

.rotate-90.scale-2 { 
    transform: rotate(90deg) scale(2); 
} 

Если объединение двух классов не ваше желание (который я совершенно не понимаю, но уважение), и если ваша структура имеет только эти два эффекта, чем вы могли бы использовать масштаб для расширения масштабов правил:

.scale-2 { 
    zoom: 2; 
}