Rotate an element in a rotating div - html

Question

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.
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/

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