Как поменять только одно свойство transform, если их несколько?

Question

[v3shin]

Приветствую. Есть ли в css возможность поменять только одно transform в случае, когда к элементу их применяется несколько? К примеру, как повернуть элемент, не меняя сдвига:

.test {
  transform: translate(10px, 20px) rotate(90deg);
}
.test:hover {
  transform: rotate(180deg);
}

П.С: в данном случае прописать translate в css - не вариант, так как это значение генерируется. Это все решается с помощью js, но вопрос в том, решается ли это средствами css.

Answer 1

[Ankhena]

- На js берете старое значение и вносите изменения.
- На css делаете кучу оберток и применяете каждой по одной трансформации.

На обычном CSS без фокусов:

.test {
  transform: translate(10px, 20px) rotate(90deg);
}
.test:hover {
  transform: translate(10px, 20px) rotate(180deg);
}

Comments

[v3shin]

Ну вот ради этого я и прописал в вопросе П.С после кода. =)

[Ankhena]

v3shin,

П.С: в данном случае прописать translate в css - не вариант, так как это значение генерируется. Это все решается с помощью js, но вопрос в том, решается ли это средствами css.

Мало, что понятно из формулировок. Выходит хочу на CSS, но без CSS?

- На js берете старое значение и вносите изменения.
- На css делаете кучу оберток и применяете каждой по одной трансформации.

[Rustam Bainazarov]

v3shin, логично, что сделать так просто не выйдет, т. к. вы перезаписываете значение свойства. Автор ответа всё верно сказала, иных путей нет.

[v3shin]

Ankhena, условно: на странице накидана куча элементов, у каждого js генерирует свой список трансформаций (которые прописываются инлайном). Я хочу при наведении на любой из элементов применять к нему еще одну конкретную трансформацию (прописываемую в css файле).
Собственно, да, оба ваши решения подходят, мне особо нравится вариант с обертками. Не могли бы вы их вынести в ответ?
Спасибо.

[Ankhena]

v3shin, отредактировала

Answer 2

[svoboda200786]

Тоже озаботился. А почему нельзя отдельно свойства прописать? Без transform: .myclass{translate: 10px 20px; rotate: 90deg;} Вроде бы и так работает. Только при такой записи запятая между координатами в транслейте не нужна.

Updt Делал в фаерфоксе, попробовал в хроме - не работает. На андроиде тоже. Вот подробнее: https://drafts.csswg.org/css-transforms-2/

И еще про способы отдельного изменения transform: https://danielcwilson.com/blog/2017/10/all-the-tra...