一款超炫3D旋转立方体动画特效

01 
<p class="container"> 
02 
  <p class="inner"> 
03 
    <p class="sub front"></p> 
04 
    <p class="sub left"></p> 
05 
    <p class="sub right"></p> 
06 
    <p class="sub back"></p> 
07 
    <p class="sub top"></p> 
08 
    <p class="sub bottom"></p> 
09 
       
10 
    <p class="smallCube"> 
11 
      <p class="side front"><p style="background-image:url(img/1.jpg);"></p></p> 
12 
      <p class="side left"><p style="background-image:url(img/2.jpg);"></p></p> 
13 
      <p class="side right"><p style="background-image:url(img/3.jpg);"></p></p> 
14 
      <p class="side back"><p style="background-image:url(img/4.jpg);"></p></p> 
15 
      <p class="side top"><p style="background-image:url(img/5.jpg);"></p></p> 
16 
      <p class="side bottom"><p style="background-image:url(img/6.jpg);"></p></p> 
17 
    </p> 
18 
  </p> 
19 
</p>

.container {
  position: relative;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  -webkit-perspective: 750px;
          perspective: 750px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container .inner {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50vw 50vw 0;
          transform-origin: 50vw 50vw 0;
}