廢話不多說(shuō)恨樟，直接上代碼

這是HTML代碼

   <div class="will_rotate">
      <ul class="rotate_parent">
        <li class="tip_front"></li>
        <li class="tip_back"></li>
        <li class="tip_right"></li>
        <li class="tip_left"></li>
        <li class="tip_top"></li>
        <li class="tip_bottom"></li>
        <li class="tip_floor"></li>
      </ul>
    </div>

這是css的代碼

/*****轉(zhuǎn)動(dòng)*******/
.will_rotate{
  width: 150px;
  height: 150px;
  margin: 0 auto;
  position: relative;
}
.rotate_parent, .rotate_parent li {
  position: absolute;
  display: block;
}
.rotate_parent{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  /*margin: -50px 0;*/
  -webkit-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
  -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
  transform: rotateX(-33.5deg) rotateY(45deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: willRotate 3s ease-in-out infinite 2s;
  animation: willRotate 3s ease-in-out infinite alternate;
  /*animation: name duration timing-function delay iteration-count direction;*/
  /*name    規(guī)定需要綁定到選擇器的 keyframe 名稱。氯夷。*/
  /*duration    規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間账锹，以秒或毫秒計(jì)。*/
  /*timing-function 規(guī)定動(dòng)畫的速度曲線。*/
  /*delay   規(guī)定在動(dòng)畫開(kāi)始之前的延遲。*/
  /*iteration-count 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)但惶。*/
  /*direction   規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫耳鸯。*/
  top: 20%;
  /*left: 50%;*/
}

.rotate_parent .tip_back, .rotate_parent .tip_front, .rotate_parent .tip_left, .rotate_parent .tip_right, .rotate_parent .tip_top {
  background: radial-gradient(transparent 30%,rgba(64, 38, 0, 0.45) 100%)
}
.rotate_parent li {
  width: 100px;
  height: 100px;
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s cubic-bezier(0, 0, 0.2, 1);
}
.rotate_parent .tip_front {
  -webkit-transform: translateZ(50px);
  transform: translateZ(50px);
}
.rotate_parent .tip_back {
  -webkit-transform:translateZ(-50px);
  transform:translateZ(-50px);
}
.rotate_parent .tip_right {
  -webkit-transform: rotateY(90deg) translateZ(50px);
  transform: rotateY(90deg) translateZ(50px);
}
.rotate_parent .tip_left {
  -webkit-transform: rotateY(90deg) translateZ(-50px);
  transform: rotateY(90deg) translateZ(-50px);
}
.rotate_parent .tip_top {
  -webkit-transform: rotateX(90deg) translateZ(50px);
  transform: rotateX(90deg) translateZ(50px);
}
.rotate_parent .tip_bottom{
  -webkit-transform: rotateX(90deg) translateZ(-50px);
  transform: rotateX(90deg) translateZ(-50px);
}
.rotate_parent .tip_floor {
  box-shadow: -300px 0 50px rgba(0,0,0,.3);
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  width: 110px;
  height: 110px;
  left: 295px;
  background-color: transparent;
  -webkit-transform: rotateX(90deg) translateZ(-60px);
  transform: rotateX(90deg) translateZ(-60px);
}
@-webkit-keyframes willRotate{
  0%{
    transform:rotateX(-33.5deg) rotateY(45deg);
  }
  50%{
    transform:rotateX(-33.5deg) rotateY(180deg);
  }
  100%{
    transform:rotateX(-33.5deg) rotateY(360deg);
  }
}
@keyframes willRotate{
  0%{
    transform:rotateX(-33.5deg) rotateY(45deg);
  }
  50%{
    transform:rotateX(-33.5deg) rotateY(180deg);
  }
  100%{
    transform:rotateX(-33.5deg) rotateY(360deg);
  }
}