Rotate an element in a rotating div

问题: I'm working on a project right now where I have to draw octagons around <img> tags. These octagons serve as menu items. If a menu is opened the center node should rot...

问题:

I'm working on a project right now where I have to draw octagons around <img> tags. These octagons serve as menu items. If a menu is opened the center node should rotate, but only the octagon and not the <img>.

The octagons are drawn around a image with this code:

.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;
}

So the basic structure looks like this:

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

The if a octagon is clicked the most outer div gets the 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;
}

This class uses the following webkit functions:

@-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);
   }
}

To prevent the inner image from rotating, i wrote a class with the name .counterrotation which does basically the same as the .rotation class but counterclockwise. So the border of the octagon turns, but the image is stationary.

Problem

Because the image is turned counterclockwise the whole time the menu is open, the style attribute transform:rotate(-45deg) does not work anymore.

As you can see here the octagon turns and the image is stationary but the image is turned by 45 degree where it shouldn't be turned.

Problem

Is there a way to turn the image so that it's aligned horizontally while not turning with the other octagon?

If not, is it possible to prevent the image from spinning in the first place?

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


回答1:

Since the image is already rotated -45deg just change the counterrotation animation

@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>

  • 发表于 2019-07-05 22:43
  • 阅读 ( 152 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除