Как сделать обратную трансформацию дочернего элемента?

Question

[vvvadimos]

вот код задачи https://jsfiddle.net/gvs0rcom/13/
нужно сделать так, чтобы .elem выглядел так, будто никаких трансформаций с элементом не было, не трогая код .block.
т.е. например если я кручу родитель квадрата, то чтоб убрать трансформацию самого квадрата, я должен просто задать обратный угол - .parent { transform: rorate(-45deg); } .child { transform: rorate(45deg); } и все будет как нужно

здесь же применить transform: rotateX(-56deg) rotateZ(46deg) к .elem не работает.

если кто-то прям шарит, то объясните смысл почему это не работает

Answer 1

[IvanU7n]

преобразования тоже нужно делать в обратном порядке:
transform: rotateZ(46deg) rotateX(-56deg);

Comments

[vvvadimos]

спасибо, не знал про обратный порядок

[vvvadimos]

еще один вопрос: в такой ситуации, что делать, чтоб сделать обратное трансформирование для .elem? https://jsfiddle.net/yrv3atsb/6/
т.е. когда надо трансформировать не прямой ребенок контейнера, который изначально крутили, а на более глубоком уровне

[IvanU7n]

vvvadimos, когда меняются размеры трансформируемых объектов, то простым инвертированием отменить можно не всякое преобразование, масла в огонь подливает и трансформация в 3Д

причины просты: преобразование происходит для элемента с привязкой к его центру (если не установлено другого через transform-origin), и если для 2Д можно как-то попытаться высчитать transform-origin относительно используемого в отменяемой трансформации transform-origin, то для 3Д помимо этого, нужно дополнительно вносить поправку на изменённый размер, что не всегда возможно; возможно как-то в этом смогут помочь container queries, но с ними не работал

[vvvadimos]

IvanU7n, спасибо