CSS анимация изменяет положение элемента

280

22 февраля 2017, 22:17

У меня есть шестиугольник внутри окружности.

Посмотрите первоначальный сценарий: fiddle

Теперь я хочу, добавить анимацию вращения шестигранника внутри круга на 360deg.

Здесь существующий сценарий с CSS анимацией (fiddle)

.rotate { 
  -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate; 
          animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate; 
  -webkit-transform-origin: 50% 50%; 
          transform-origin: 50% 50%; 
} 
@-webkit-keyframes rotating { 
  100% { 
    -webkit-transform: rotate(360deg); 
            transform: rotate(360deg); 
  } 
}

<svg width="350" height="350"> 
  <svg width="350" height="350"> 
    <circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <svg viewBox="0 0 600 720" width="295" height="205"> 
      <g transform="translate(239, 370)" class="rotate"> 
        <path></path> 
        <path d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path> 
      </g> 
      <svg viewBox="0 0 600 720" width="507.4" height="799.5"> 
        <g transform="translate(105, 395)"> 
          <path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path> 
        </g> 
      </svg> 
    </svg> 
  </svg> 
</svg>

Answer 1

Проблема, с которой вы столкнулись, состоит в том, что вы применяете преобразование с помощью CSS (rotate(360deg)), а у вас уже есть трансформация на тот же элемент в SVG (translate(239, 370)).

Вы можете решить эту проблему двумя способами:

применять все трансформации с помощью CSS, так что вы полностью можете контролировать анимацию с помощью CSS.
применить CSS анимацию на дочерний элемент (шестиугольник).

Ниже приведен пример того, как можно решить эту проблему вторым способом:

.rotate { 
  -webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate; 
          animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate; 
  -webkit-transform-origin: 50% 50%; 
          transform-origin: 50% 50%; 
} 
@-webkit-keyframes rotating { 
  100% { 
    -webkit-transform: rotate(360deg); 
            transform: rotate(360deg); 
  } 
}

<svg width="350" height="350"> 
  <svg width="350" height="350"> 
    <circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle> 
    <svg viewBox="0 0 600 720" width="295" height="205"> 
      <g transform="translate(239, 370)"> 
        <path></path> 
        <path class="rotate" d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path> 
      </g> 
      <svg viewBox="0 0 600 720" width="507.4" height="799.5"> 
        <g transform="translate(105, 395)"> 
          <path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path> 
        </g> 
      </svg> 
    </svg> 
  </svg> 
</svg>

Ответил: web-tiki