transform实现动态效果

实现如上图动态效果

<style>
  .box {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 50px auto;
  }

  .box:hover .img1 {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  .box:hover .img2 {
    transform: translate(-50%, -50%) rotate(-360deg);
  }

  .box:hover .img3 {
    transform: translate(-50%, -50%) rotate(-360deg);
  }

  .box .img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: 1s;
  }

  .box .img1 {
    width: 167px;
    height: 167px;
    background-image: url("images/page2_img1.png");
  }

  .box .img2 {
    width: 185px;
    height: 185px;
    background-image: url("images/page2_img2.png");
  }

  .box .img3 {
    width: 226px;
    height: 226px;
    background-image: url("images/page2_img3.png");
  }

  .box .img4 {
    width: 299px;
    height: 299px;
    background-image: url("images/page2_img4.png");
  }
</style>

<div class="box">
    <div class="img1 img"></div>
    <div class="img2 img"></div>
    <div class="img3 img"></div>
    <div class="img4 img"></div>
</div>