キュイキュイっと複数の枠が上下左右に回転するボタン

html

<div class="circle">
  <div class="circle2"></div>
  <div class="circle3"></div>
    <a href="#">PASTEL</a>
  </div>

css

.circle{
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: solid 2px #00ff00;
  text-align: center;
}

.circle a{
  font-size: 20px;
  line-height: 210px;
  text-decoration: none;
  text-transform: uppercase;
}

.circle2{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: solid 2px #0099cc;
  transition: 10s;
  -webkit-transition: 10s;
}

.circle3{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: solid 2px #0099cc;
  transition: 10s;
  -webkit-transition: 10s;
}

.circle:hover > .circle2{
  transform: rotateY(7200deg);
  -webkit-transform: rotateY(7200deg);
}

.circle:hover > .circle3{
  transform: rotateX(720deg);
  -webkit-transform: rotateX(720deg);
}