* {
            margin: 0;
            padding: 0;
        }
        body{
            perspective: 1000px;
        }
        #box {
            position: relative;
            margin: 300px auto;
            width: 200px;
            font-size: 60px;
            transform-style:preserve-3d;
            transform: rotateX(-30deg) rotateY(30deg);
            animation:per linear 10s  infinite ;
        }
          @keyframes per{
        0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
        10%{transform:rotateX(36deg) rotateY(36deg) rotateZ(36deg);}
        20%{transform:rotateX(72deg) rotateY(72deg) rotateZ(72deg);}
        30%{transform:rotateX(108deg) rotateY(108deg) rotateZ(108deg);}
        40%{transform:rotateX(144deg) rotateY(144deg) rotateZ(144deg);}
        50%{transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);}
        60%{transform:rotateX(216deg) rotateY(216deg) rotateZ(216deg);}
        70%{transform:rotateX(252deg) rotateY(252deg) rotateZ(252deg);}
        80%{transform:rotateX(288deg) rotateY(288deg) rotateZ(288deg);}
        90%{transform:rotateX(324deg) rotateY(324deg) rotateZ(324deg);}
        100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
        }
        #box>div{
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(0,0,0,0.3);
            border: 1px solid #999;
            color: white;
            text-align: center;
            line-height: 200px;
        }
        #d1{
            transform: translateZ(100px);
        }
        #d2{
            transform: rotateY(-180deg) translateZ(100px);
        }
        #d3{
            transform: rotateX(-90deg) translateZ(100px);
        }
        #d4{
            transform: rotateX(90deg) translateZ(100px);
        }
        #d5{
            transform: rotateY(90deg) translateZ(100px);
        }
        #d6{
            transform: rotateY(-90deg) translateZ(100px);
        }