在旋转 div 中旋转一个元素

Question

我现在正在做一个项目，我必须在 <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 得到 class .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;
}

此 class 使用以下 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的class，它与.rotation class基本相同，但逆时针方向。所以八边形的边界在转动，但图像是静止的。

Problem

因为在打开菜单的整个过程中图像都是逆时针旋转的，所以样式属性 transform:rotate(-45deg) 不再起作用。

正如您在此处看到的那样，八边形旋转并且图像静止不动，但图像在不应该旋转的地方旋转了 45 度。

有没有办法转动图像使其水平对齐而不与另一个八边形一起转动？

如果不是，是否可以首先阻止图像旋转？

Edit 1: Somehow working code: https://jsfiddle.net/mrcrane/rz285mw9/13/

Answer 1

因为图像已经旋转了-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>

在旋转 div 中旋转一个元素

Rotate an element in a rotating div

html

css

css-transforms

css-animations