how to rotate a single element that inisde another rotating element

Mehmet Emre Topdal 0
Viewed 35

i have a circle to contain some spinning elements. i have a div.tool contain a svg in circle. While a rotate div.tool, the image inside it also rotating, but i want that image remain straight. how can i fix that

HTML

<div class="circle">
        <div class="tool" id="css"> <img src="css.svg"></div>
    </div>

CSS


.circle{
    position: relative;
    background-color: #f5f5ff;
    border-radius: 50%;
    width: 500px;
    height: 500px;
    border: 2px solid black;

}

.tool{
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    --rotation:0;
    transform: rotate(var(--rotation));
    padding-top: 10px;
    
}

img{
    width: 75px;
    transform: rotate(calc(-1 * var(--rotation)));
}

#css{
    --rotation: 0deg;
    --spin-initial: 0;
    animation: spin 30s linear infinite;
}

@keyframes spin {
    from{
        transform: rotate(calc(var(--spin-initial) * 1deg));
    }
    to{
        transform: rotate(  calc(calc(360 + var(--spin-initial))*1deg)  );
    }
}
animation css html
2 Answers

Rotate the image the other way.

.circle {
  position: relative;
  background-color: #f5f5ff;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  border: 2px solid black;
}

.tool {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  --rotation: 0;
  transform: rotate(var(--rotation));
  padding-top: 10px;
}

img {
  width: 75px;
  transform: rotate(calc(-1 * var(--rotation)));
  animation: spin 30s linear infinite reverse;
}

#css {
  --rotation: 0deg;
  --spin-initial: 0;
  animation: spin 30s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(calc(var(--spin-initial) * 1deg));
  }
  to {
    transform: rotate(calc(calc(360 + var(--spin-initial)) * 1deg));
  }
}
<div class="circle">
  <div class="tool" id="css"> <img src="https://clipartix.com/wp-content/uploads/2017/06/Free-simple-basketball-clip-art.png"></div>
</div>

Paulie_D0

Rotate the image inifintely in opposite direction of it's parent container to negate the rotation on image.

userVmXl0
Related