CSS. KEYFRAMES. Как «снять» анимацию с потомка?

Question

[Miserly]

Всю неделю безуспешно пытаюсь осилить задачку (см. заголовок). Помогите, пожалуйста.

Дано: есть DOM, в нем есть <див класс="спин">, как становится ясно из названия класса, он вращается, а именно поворачивается по оси абсцисс(OX) на 90 градусов и обратно, + он обладает свойством overflow:hidden; и у этого дива ( <див класс="спин">) есть несколько потомков...

Проблема: эти потомки (хочется "том" заменить на "дон" :) наследуют анимацию родителя и начинают вращаться вместе с ним, а мне этого не нужно. требуется крутить только родителя , а как только его границы "заезжают" на детей - соблюдать условие overflow.

Насколько я понял, в CSS на анимацию не распространяются обычные правила специфичности. В случае анимации они не отменяют друг друга, а складываются. Я уже что только не пробовал и компенсировать анимацию родителя анимацией потомка, и DOM менял... Вот максимально аппроксимированный код codepen.io/BogdanForost/pen/dmnqI т.е. белый и черный квадраты двигаться НЕ должны.

Хотелось бы обойтись без JS, но буду рад любому решению.

Answer 1

[Юрий Лобанов]

А чего Вы хотите? У Вас внутренний элемент абсолютно позиционирован относительно вращающегося элемента, конечно он будет вместе с ним вращаться - при чем тут наследование. Если Вы туда просто поместите текст - он тоже будет вращаться, потому что он находится внутри этого элемента.
Нужно искать другое решение разметки, что-нибудь вроде маски, под которой расположен элемент, который не должен вращаться.

Comments

[Miserly]

Спасибо