用css3做一个正方体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
        /*
         -webkit-perspective: 200px;-webkit-perspective-origin: right top;   景深
         旋转移动
         */
            .wrap{width: 100px;height: 100px;padding: 100px;border: 5px solid #000;margin: 100px auto;-webkit-perspective: 200px;-webkit-perspective-origin: right top;}
            .box{width: 100px;height: 100px;position: relative;-webkit-transform-style: preserve-3d;-webkit-transition: 2s;-webkit-transform-origin: center center -50px;}
            .box div{position: absolute;width: 100px;height: 100px;color: #FFF;font-size: 40px;line-height: 100px;text-align: center;}
            .box div:nth-child(1){left: 0;top: -100px;background: blue;-webkit-transform:rotateX(90deg);-webkit-transform-origin: bottom;}
            .box div:nth-child(2){left: -100px;top: 0;background: yellow;-webkit-transform:rotateY(-90deg);-webkit-transform-origin: right;}
            .box div:nth-child(3){left: 0;top: 0;background: red;-webkit-transform: translateZ(0px);}
            .box div:nth-child(4){left: 100px;top: 0;background: #f60;-webkit-transform:rotateY(90deg);-webkit-transform-origin: left;}
            .box div:nth-child(5){left: 0px;top: 100px;background: gray;-webkit-transform:rotateX(-90deg);-webkit-transform-origin: top;}
            .box div:nth-child(6){left: 0px;top: 0;background: green;-webkit-transform: translateZ(-100px) rotateX(180deg);}
            .wrap:hover .box{-webkit-transform: rotateX(180deg);}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </body>
</html>