Есть проблема с Родителями и Предками в HTML или возможно в коде CSS!

Question

Родитель - это планета, которая крутиться, на планете картинка с автомобилем (Предок №1) и два колеса, которые тоже крутятся (Предок 2 и 3). На том разрешение, на котором делал верстку работает все правильно (планете и два колеса крутиться), но стоит мне изменить размеры экрана (Автомобиль уходит вверх (при это, что колеса прицепились правильно к автомобилю и выглядит это как единое целое и уходят тоже в сторону). Если убрать на третий строчке, то автомобиль начинает крутиться вместе с планетой... Не знаю, как решить задачу, чтобы автомобиль оставался на том же месте при смене разрешения на экране. Товарищи нужны идеи) Всем спасибо

<strike>
<section id="main">
<div class="main-figure">  <!--Родитель - это планета-->
<img src="/img... alt="ddd"></div>
<div class="car">
<img src="/img/..." alt="car">. <!--Предок №1 - это автомобиль-->
<div class="wheel-1">
<img src="/img/..." alt="wheel"> </div> <!--Предок №2 колесо автомобиля-->
<div class="wheel-1">
<div class="wheel-2"> 
<img src="/img/..." alt="wheel"></div> <!--Предок №3 колесо автомобиля-->
<div class="wheel-1">
</div>
</strike>

``` 
    #main {
    display: flex;
    position: relative;
    object-fit: contain;
    max-width: 100%;
    justify-content: center;
}
.main-figure {
    display: flex;
    position: absolute;
    justify-content: center;
    animation: spin 10s linear 0s infinite; 
    z-index: -9;              
 }
     @keyframes spin {
         from {transform:rotate(0deg);}
         to {transform:rotate(360deg);}
     }
.car {
display: flex;
position: absolute;
transform: rotate(-12deg);
}
.wheel-1 {
display: flex; 
position: absolute;
transform: rotate(2.5deg);
animation: spin 1.0s linear 0s infinite ; /* infinite - анимация повторяется бесконечно; */
}
    @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
    }

.wheel-2 {
display: flex; 
position: absolute;
transform: rotate(2.5deg);
animation: spin 1.0s linear 0s infinite ; /* infinite - анимация повторяется бесконечно; */
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
```

Answer 1

Нате. Позиционируйте где надо блок, выделенный красной рамкой

@keyframes spinPlanet {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}


/* планета и колеса не могут вращаться в одну сторону */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.cartoon {
  position: relative;
  border: 1px solid red;
  display: inline-block;
  padding-top: 20px;
}

.main-figure {
  animation: spinPlanet 10s linear 0s infinite;
  background-color: lightblue;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  line-height: 50px;
  text-align: center;
}

.car {
  position: absolute;
  transform: rotate(-12deg);
  background-color: pink;
  height: 20px;
  width: 30px;
  top: 0;
  text-align: center;
}

.wheel-1 {
  position: absolute;
  animation: spin 1.0s linear 0s infinite;
  background-color: red;
  height: 16px;
  width: 10px;
  border-radius: 100%;
  left: 0;
  margin-top: -8px;
}

.wheel-2 {
  position: absolute;
  animation: spin 1.0s linear 0s infinite;
  animation-delay: -0.2s;
  background-color: green;
  height: 16px;
  width: 10px;
  border-radius: 100%;
  margin-top: -8px;
  left: calc(100% - 10px);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="cartoon">
  <div class="main-figure">
    Planet
  </div>
  <div class="car">
    Car
    <div class="wheel-1">1</div>

    <div class="wheel-2">2</div>

  </div>
</div>

БЛОГ НА HUSL

Есть проблема с Родителями и Предками в HTML или возможно в коде CSS!

Ответы (1 шт):