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将获得类.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类基本相同，但沿逆时针方向。因此，八边形的边界变了，但是图像是静止的。

问题

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

正如您在这里看到的那样，八边形旋转并且图像静止，但是图像旋转了45度，因此不应旋转。

是否有一种方法可以旋转图像，使其水平对齐而不与另一个八边形旋转？

如果不是，是否可以防止图像一开始旋转？

修改1： 以某种方式工作的代码： 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中旋转元素

1 个答案: