这是一个“干”字

xxxxxxxxxx
 
#wrap{
  -webkit-perspective: 3d-preserve;
  perspective-origin: 800;
  width: 300px;
  height: 300px;
  animation: wrap 10s infinite alternate;
}
#wrap div{
  width: 300px;
  height: 300px;
  background: #ccc;
  position: absolute;
  transition: all 2s;
}
#d1{
  transform-origin: top center;
  animation: d1 3s infinite alternate;
}
#d2{
  animation: d2 3s infinite alternate;
}
#d3{
  animation: d3 3s infinite alternate;
}
#d4{
  animation: d4 3s infinite alternate;
}
@keyframes wrap{
  from{
    transform: rotate3d(0,0,0,0);
  }
  to{
    transform: rotate3d(1,1,1,270deg);
  }
}
@keyframes d1{
  from{
    transform: rotate3d(0,0,0,0);
  }
  to{
    transform: rotate3d(1,0,0,75deg);
  }
}
@keyframes d2{
  from{
    transform: rotate3d(0,0,0,0);
  }
  to{
    transform: rotate3d(0,1,0,75deg);
  }
}
@keyframes d3{
  from{
    transform: rotate3d(0,0,0,0);
  }
  to{
    transform: rotate3d(1,0,0,-75deg);
  }
}
@keyframes d4{
  from{
    transform: rotate3d(0,0,0,0);
  }
  to{
    transform: rotate3d(0,1,0,-75deg);
  }
}
CSS