CSS Movement

by the_voder

HTML

<div id="cog1" class="cogcontainer">
    <div class="coginner">
        <img src="https://e7.pngegg.com/pngimages/921/11/png-clipart-computer-icons-gear-sprocket-european-style-wedding-logo-free-s-miscellaneous-desktop-wallpaper.png" alt="cog graphic">
    </div>
</div>

<div class="cogcontainer">
    <div class="coginner">
        <img src="https://e7.pngegg.com/pngimages/921/11/png-clipart-computer-icons-gear-sprocket-european-style-wedding-logo-free-s-miscellaneous-desktop-wallpaper.png" alt="cog graphic">
    </div>
</div>

CSS

.cogcontainer {
  position: relative;
  width: 30vw;
  aspect-ratio: 1;
  margin: 10px;
  padding: 2vw;
  overflow: hidden;
}

.coginner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  overflow: hidden;
  will-change: transform;
  /* Transition time set here determines how long transition takes to return to original value */
  transition: transform 2s;
}

.coginner img {
  width: 100%;
  height: auto;
}

.cogcontainer:hover .coginner {
  /* Transition time here sets how long transition to new value takes */
  transition: transform 500ms;
  transform: rotate(45deg);
}