首先先创建一个父盒子和子盒子。

<div class="box">
    <div class="box2">

    </div>
  </div>

样式：

.box{
      width: 700px;
      height: 150px;
      border: 1px solid black;
    }

    .box2{
      width: 100px;
      height: 100px;
      background-color: brown;
      transition: 0.5s;
    }

旋转效果

当父盒子鼠标经过，子盒子发生旋转。

.box:hover .box2{
      transform: rotate(360deg);
    }

旋转+移动效果

.box:hover .box2{
      transform: translateX(600px) rotate(360deg);
    }