CSS3_旋转练习03

<meta charset="UTF-8">
<title></title>
<style>
    #box{
        width: 500px;
        height: 500px;
        margin: 200px auto;
        position: absolute;
        top: 0;
        left: 0;
       /* transform-origin: right top ;*/
    }

    #box img{
        display: block;
        width: 500px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: right top ;
        transition: all 0.6s;
    }
    #box:hover img:nth-child(1){
        transform: rotate(60deg);


    }
    #box:hover img:nth-child(2){

            transform: rotate(120deg);


        }
    #box:hover img:nth-child(3){

        transform: rotate(180deg);


    }
    #box:hover img:nth-child(4){

        transform: rotate(240deg);


    }
    #box:hover img:nth-child(5){

        transform: rotate(300deg);


    }
    #box:hover img:nth-child(6){

        transform: rotate(360deg);


    }



</style>