3D变形--正方体旋转

 <style type="text/css">
        .box{
            width:200px;
            height:200px;
            border: 1px solid #000;
            margin:100px auto;
            perspective:5000px;
        }
        .unit{
            width:200px;
            height:200px;
            border: 1px solid #000;
            position: relative;
            perspective:5000px; 
            transform-style:preserve-3d;
            transition:all 30s ease 0s;
        }
        .unit div{
             width:200px;
             height:200px;
             line-height:200px;
             text-align: center;
            font-size: 60px;
            position: absolute;
            top:0px;
            left:0px;
        }
        .unit div:nth-child(1){
            background:rgba(255, 0, 0, 0.5);
            transform:translateZ(100px);
        }
        .unit div:nth-child(2){
            background:rgba(255, 255, 0, 0.5);
            transform:rotateX(90deg) translateZ(100px);
        }
        .unit div:nth-child(3){
            background:rgba(255, 0, 255, 0.5);
            transform:rotateX(-90deg) translateZ(100px);
        }
        .unit div:nth-child(4){
            background:rgba(0, 255, 255, 0.5);
            transform:rotateX(180deg) translateZ(100px);
        }
        .unit div:nth-child(5){
            background:rgba(255, 0, 100, 0.5);
            transform:rotateY(90deg) translateZ(100px);
        }
        .unit div:nth-child(6){
            background:rgba(100, 255, 0, 0.5);
            transform:rotateY(-90deg) translateZ(100px);
        }
        .box:hover .unit{
             transform:rotateX(3000deg) rotateY(3600deg);
        }
</style>
<div class="box">
       <div class="unit">
           <div>1</div>
           <div>2</div>
           <div>3</div>
           <div>4</div>
           <div>5</div>
           <div>6</div>
       </div>
</div>