Simple rotating hover effect wont work

Question

I am trying to create a simple effect so that when I hover on the inner most circle, the two outer rings rotate around to create a cool effect. I thought this would be an easy task but I cannot seem to figure out what I am doing wrong. When I hover over the inner circle, all that changes are the two inner rings move towards the bottom right hand corner of the screen, without rotating at all. What am I missing here? Thanks

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto auto;
  background: black;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-1 {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px;
  border-style: solid;
  border-color: white white white transparent;
  transition: 1.5s all ease-in-out;
}

.circle-2 {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px;
  border-style: solid;
  border-color: white transparent white white;
  transition: 1.5s all ease-in-out;
}

.circle:hover .circle-2 {
  transform: rotate(360deg);
}

.circle:hover .circle-1 {
  transform: rotate(-360deg);
}

<div class="wrapper">
  <div class="circle">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
  </div>
</div>

Answer 1

You are using transform with translation in order to center your element then you are overriding the transform with the rotation which create the issue. Instead you can adjust the top/left values in order to center and avoid using transform then you will have the needed rotation:

.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto auto;
  background: black;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-1 {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: calc(50% - 55px);
  left: calc(50% - 55px);
  border: 2px;
  border-style: solid;
  border-color: white white white transparent;
  transition: 1.5s all ease-in-out;
}

.circle-2 {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: calc(50% - 60px);
  left:calc(50% - 60px);
  border: 2px;
  border-style: solid;
  border-color: white transparent white white;
  transition: 1.5s all ease-in-out;
}

.circle:hover .circle-2 {
  transform: rotate(360deg);
}

.circle:hover .circle-1 {
  transform:  rotate(-360deg);
}

<div class="wrapper">
  <div class="circle">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
  </div>
</div>

You can also simplify your code by using pseudo elements like this:

* {
 box-sizing:border-box;
}
.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  margin: auto;
  background: black;
}

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:radial-gradient(circle at center, grey 50px,transparent 51px);
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle:before,
.circle:after {
  content:"";
  border-radius: 50%;
  position: absolute;
  transition: 1.5s all ease-in-out;
  border: 2px solid white;
}

.circle:before {
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-left-color:transparent;
}

.circle:after{
  top:5px;
  left:5px;
  bottom:5px;
  right:5px;
  border-right-color:transparent;
}

.circle:hover::before {
  transform: rotate(360deg);
}

.circle:hover::after {
  transform:  rotate(-360deg);
}

<div class="wrapper">
  <div class="circle">
  </div>
</div>