H5+C3实现超炫酷正方形内嵌

 大家先看效果图：

 

HTML部分代码

<div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div class=" box main">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

 CSS部分代码：

         *{
            margin: 0;padding: 0;
        }
        .box{
            margin: 250px auto;
            width: 200px;height: 200px;
            position: relative;
            transition: 5s;
            transform-style: preserve-3d;
        }
        .box div{
            width: 198px;height: 198px;
            position: absolute;
            top:0;
            left:0;
            border: 1px solid red;
        }
        .box:hover{
             transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }
        .box div:nth-child(1){
            transform:translateZ(100px);
        }
        .box div:nth-child(2){
            transform:translateZ(-100px);
        }
        .box div:nth-child(3){
                
                transform-origin: left center;
                transform: rotateY(90deg) translateX(-100px);
        }
        .box div:nth-child(4){
            transform-origin: right;
                transform: rotateY(-90deg) translateX(100px);
        }
        .box div:nth-child(5){
            transform-origin: top;
                transform: rotateX(90deg) translateY(-100px);
        }
        .box div:nth-child(6){
            transform-origin: bottom;
                transform: rotateX(-90deg) translateY(100px);
        }
        .main div{
            border: 1px solid darkmagenta;
        }
    .main{
        /*内部小正方形*/
        transform:  translateY(-250px) translateX(0px) scale3d(.5,.5,.5);
    }