CSS3动画代码---立方体旋转

第一部分：CSS

<style type="text/css">
            .main{
                position:absolute;
                /*border: 1px solid;*/
                width: 250px;
                height: 250px;
                top: 0px;
                left: 0px;
                -webkit-transition: top 1s,left 1s;
            }
            .main:hover{
                top:100px;
                left: 100px;
            }
            .main1{
                position: absolute;
                /*border: 1px solid;*/
                width: 250px;
                height: 250px;
                left: 300px;
                top: 0px;
                -webkit-transition: top 2s,left 2s;
            }
            .main1:hover{
                top:100px;
                left: 350px;
            }
            .main2{
                position: absolute;
                /*border: 1px solid;*/
                width: 250px;
                height: 250px;
                left: 600px;
                top: 0px;
                -webkit-transition: top 2s,left 2s;
            }
            .main2:hover{
                top:100px;
                left: 650px;
            }
            div{
                position: absolute;
                background-color: rgba(102,101,102,0.5);
                border: 1px solid black;
                color: white;
                text-align: center;
                font-size: 40px;
            }
            #div1{
                top: 150px;
                left: 150px;
                width: 100px;
                height: 100px;
                line-height: 100px;
                -webkit-transition:-webkit-transform 3s;
            }
            #div1:hover{
                -webkit-transform: rotate(360deg);
                background-color: darkblue;
            }
            #div3{
                top: 80px;
                left: 27px;
                width: 100px;
                height: 100px;
                line-height: 100px;
                -webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
            }
            #div3:hover{
                -webkit-transform: rotate(360deg);
                width:100px;
                height: 100px;
                top: 150px;
                left: 150px;
                background-color: darkblue;
                z-index: 1;
            }
            #div2{
                top: 115px;
                left: 28px;
                width: 120px;
                height: 100px;
                line-height: 100px;
                -webkit-transform: skew(0deg,30deg);
                -webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
            }
            #div2:hover{
                -webkit-transform: rotate(360deg);
                width:100px;
                height: 100px;
                top: 150px;
                left: 150px;
                background-color: darkblue;
                z-index: 1;
            }
            #div4{
                top: 115px;
                left: 129px;
                width: 120px;
                height: 100px;
                line-height: 100px;
                -webkit-transform: skew(0deg,30deg);
                -webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
            }
            #div4:hover{
                -webkit-transform: rotate(360deg);
                width:100px;
                height: 100px;
                top: 150px;
                left: 150px;
                background-color: darkblue;
                z-index: 1;
            }
            #div5{
                top: 80px;
                left: 89px;
                width: 100px;
                height: 70px;
                line-height: 70px;
                -webkit-transform: skew(60deg,0deg);
                -webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
            }
            #div5:hover{
                -webkit-transform: rotate(360deg);
                width:100px;
                height: 100px;
                top: 150px;
                left: 150px;
line-height: 100px;
                background-color: darkblue;
                z-index: 1;
            }
            #div6{
                top: 180px;
                left: 88px;
                width: 100px;
                height: 70px;
                line-height: 70px;
                -webkit-transform: skew(60deg,0deg);
                -webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
            }
            #div6:hover{
                -webkit-transform: rotate(360deg);
                width:100px;
                height: 100px;
line-height: 100px;
                top: 150px;
                left: 150px;
                background-color: darkblue;
                z-index: 1;
            }
        </style>

第二部分：HTML

<body>
        <article class="main">
            <div id="div6">6</div>
            <div id="div3">3</div>
            <div id="div2">2</div>
            <div id="div4">4</div>
            <div id="div1">1</div>
            <div id="div5">5</div>
        </article>
        <article class="main1">
            <div id="div6">6</div>
            <div id="div3">3</div>
            <div id="div2">2</div>
            <div id="div4">4</div>
            <div id="div1">1</div>
            <div id="div5">5</div>
        </article>
        <article class="main2">
            <div id="div6">6</div>
            <div id="div3">3</div>
            <div id="div2">2</div>
            <div id="div4">4</div>
            <div id="div1">1</div>
            <div id="div5">5</div>
        </article>
    </body>

第三部分：效果图