<div class="container">
  <div class="container-small">
    <div class="small small-1"></div>
    <div class="big big-1"></div>
    <div class="small small-2"></div>
    <div class="big big-2"></div>
    <div class="small small-3"></div>
    <div class="big big-3"></div>
    <div class="small small-4"></div>
    <div class="big big-4"></div>
  </div>
</div>

.container {
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}

.big {
  width: 100px;
  height: 150px;
  border-radius: 10px;
  position: absolute;
  transition: all 0.3s linear;
  &.big-1 {
    background-color: red;
    transform: rotate(165deg);
    transform-origin: 39% 45%;
  }
  &.big-2 {
    background-color: green;
    transform: rotate(173deg);
    transform-origin: 44% 47%;
  }
  &.big-3 {
    background-color: pink;
    transform: rotate(180deg);
    transform-origin: 49% 49%;
  }
  &.big-4 {
    background-color: purple;
    transform: rotate(185deg);
    transform-origin: 53% 51%;
  }
}

.small {
  width: 0;
  height: 0;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 0.3s linear;
  &.small-1 {
    background-color: black;
  }
  &.small-2 {
    background-color: yellow;
  }
  &.small-3 {
    background-color: #dcdcdc;
  }
  &.small-4 {
    background-color: orange;
  }
}

.container-small {
  position: relative;
  transition: all 1s linear;
  &:hover {
    .big-1 {
       transform: rotate(137deg);
       transform-origin: 9% 33%;
    }
    .big-2 {
       transform: rotate(160deg);
       transform-origin: 30% 40%;
    }
    .big-3 {
       transform: rotate(180deg);
       transform-origin: 49% 46%;
    }
    .big-4 {
       transform: rotate(200deg);
       transform-origin: 68% 51%;
    }
    .small {
      width: 75px;
      height: 75px;
    }
    .small-1 {
      position: absolute;
      left: -160px;
      top: -60px;
      transform: rotate(350deg);
    }
    .small-2 {
      position: absolute;
      left: -120px;
      top: 110px;
      transform: rotate(10deg);
    }
    .small-3 {
      position: absolute;
      left: 80px;
      top: -80px;
      transform: rotate(350deg);
    }
    .small-4 {
      position: absolute;
      left: 110px;
      top: 112px;
      transform: rotate(350deg);
    }
  }
}