Как зафиксировать дочерний div_3, а точнее -img в div_3, при вращении — родителя div_1?

Question

[maxgeor]

Добрый день!
Как зафиксировать дочерний div_3, а точнее img в div_3 при вращении - родителя div_1?

Структура:

<div_1>
        <div_2>
                 <div_3><img></div_3>
        </div_2>
</div_1>

div_1 {
  -webkit-animation: spin 0.8s infinite linear;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

!!! .div_3{
position: absolute;
}

Прим: Вращается именно - div_1!
Прим_2: Если - возможно без JS! Но .....
Спасибо!

Answer 1

[Павел Антонов]

никак, менять структуру верстки и делать элементы визуально так как надо, но без вложенности

Comments

[maxgeor]

а потом накладывать position(ами)?

[Павел Антонов]

да по другому не получится

[Павел Антонов]

maxgeor, сам страдал такой штукой когда дизайнер придумывал что-то нестандартное

[maxgeor]

Павел Антонов, - Спасибо!

[Павел Антонов]

maxgeor, ну ты лучше оставь вопрос пока, может кто-то подскажет еще, но помоему других вариантов нет

[maxgeor]

Павел Антонов, Ok

[Павел Антонов]

maxgeor, можно попробовать див 3 вращать в обратную сторону -360deg :D не знаю вдруг получится)

[Max Developer]

при такой структуре можно аннулировать вращение картинки только обратной анимацией, типа

div_3 img {
    -webkit-animation: spin2 0.8s infinite linear;
}
@-webkit-keyframes spin2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

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

[maxgeor]

Max Front, согласен...., и работает как костыль - img по горизонту-х сложно поймать:(

[maxgeor]

Max Front, хотя -нет "поймал" по горизонту!

[maxgeor]

Max Front, Павел Антонов, но position - по стабильней думаю будет!

Answer 2

[Grigory S.]

Вращать div_3 в обратном направлении, как вариант.