Повернуть элемент во вращающемся элементе - PullRequest
Новая
       40

Повернуть элемент во вращающемся элементе

1 голос
/ 03 июля 2019

Я сейчас работаю над проектом, в котором я должен нарисовать восьмиугольники вокруг <img> тегов.Эти восьмиугольники служат пунктами меню.Если меню открыто, центральный узел должен вращаться, но только восьмиугольник, а не <img>.

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

.octagonWrap{
    width: 70px;
    height: 70px;
    float: left;
    position: absolute;
    overflow: hidden;
}
.octagon{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transform: rotate(45deg);
    background-color: transparent;
    border: 2px solid #ff7a00;
}

.octagon:before{
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    transform: rotate(-45deg);
    content: '';
    border: inherit;
}

Так чтоБазовая структура выглядит следующим образом: 

<div class="octagonWrap">
   <div class="octagon">
      <img style="transform:rotate(-45deg)">
   </div>
</div>

Если при нажатии на восьмиугольник самый внешний div получает класс .rotating: 

.rotating {
   -webkit-animation: rotating 8s linear infinite;
   -moz-animation: rotating 8s linear infinite;
   -ms-animation: rotating 8s linear infinite;
   -o-animation: rotating 8s linear infinite;
}

В этом классе используются следующие функции webkit: 

@-webkit-keyframes rotating{
from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
   }

to {
    -webkit-transform: rotate(36deg);
    -o-transform: rotate(360deg);
   }
}

@keyframes rotating {
    from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
   }

to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
   }
}

Чтобы предотвратить вращение внутреннего изображения, я написал класс с именем .counterrotation, который в основном соответствует классу .rotation, но против часовой стрелки.Таким образом, граница восьмиугольника поворачивается, но изображение неподвижно.

Задача

Поскольку изображение поворачивается против часовой стрелки все время, пока менюоткрыто, атрибут style transform:rotate(-45deg) больше не работает.

Как вы можете видеть здесь, восьмиугольник поворачивается, и изображение неподвижно, но изображение поворачивается на 45 градусов, где его не следует поворачивать.

Problem

Есть ли способ повернуть изображение так, чтобы оно было выровнено по горизонтали, не поворачиваясь с другим восьмиугольником?

Если нет,Можно ли вообще предотвратить вращение изображения?

Редактировать 1: Каким-то образом рабочий код: https://jsfiddle.net/mrcrane/rz285mw9/13/

1 Ответ

1 голос
/ 03 июля 2019

Поскольку изображение уже повернуто -45deg, просто измените анимацию противовращения 

@keyframes counterrotating {
  from {
   transform: rotate(-45deg);
  }
  to {
    transform: rotate(-405deg);
  }
}


$(document).on("click", '.octa', function(e) {
  $(e.target.parentElement).parent().addClass("open rotating");
  $(e.target).addClass("counterrotating");
});
.octagonWrap {
  width: 70px;
  height: 70px;
  float: left;
  position: absolute;
  overflow: hidden;
}

.octagon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transform: rotate(45deg);
  background-color: transparent;
  border: 2px solid #ff7a00;
}

.octagon::before {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  transform: rotate(45deg);
  content: '';
  border: inherit;
}

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

.rotating {
  -webkit-animation: rotating 8s linear infinite;
  -moz-animation: rotating 8s linear infinite;
  -ms-animation: rotating 8s linear infinite;
  -o-animation: rotating 8s linear infinite;
}

@keyframes counterrotating {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-405deg);
  }
}

.counterrotating {
  -webkit-animation: counterrotating 8s linear infinite;
  -moz-animation: counterrotating 8s linear infinite;
  -ms-animation: counterrotating 8s linear infinite;
  -o-animation: counterrotating 8s linear infinite;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="graphContainer" style="position:absolute; width:100%;height:100%;cursor:default;">
  <div id="add" style="position:absolute; top:10% ;left:50%" class='octagonWrap menuItem open'>
    <div class='octagon' style="width:100%;height:100%;">
      <img class="octa" src="https://image.flaticon.com/icons/svg/149/149098.svg" style="position:absolute; top:0;left:0;bottom:0;right:0; margin:auto; transform: rotate(-45deg); width:50px; height:50px" />
    </div>
  </div>
</div>
...