CSS3实现扑克牌动画

代码片
<style>
        body{
            background-color: #eeeeee;
        }
        .box{

            width:300px;
            height:440px;
            margin: 100px auto;
            position: relative;
        }
        img{
            width:100%;
            height: 100%;
            transition:all 1s;
            position: absolute;
            left: 0;
            top: 0;
            /*变换中心原点*/
            transform-origin: center bottom;
           /* box-shadow: 0 0 3px 0 #666666;*/
        }
      /*  .box:hover img{
            transform: rotate(45deg);
        }*/

        .box:hover img:nth-child(6){
            transform: rotate(-10deg);
        }
        .box:hover img:nth-child(5){
            transform: rotate(-20deg);
        }
        .box:hover img:nth-child(4){
            transform: rotate(-30deg);
        }
        .box:hover img:nth-child(3){
            transform: rotate(-40deg);
        }
        .box:hover img:nth-child(2){
            transform: rotate(-50deg);
        }
        .box:hover img:nth-child(1) {
            transform: rotate(-60deg);
        }

        .box:hover img:nth-child(8){
            transform: rotate(10deg);
        }
        .box:hover img:nth-child(9){
            transform: rotate(20deg);
        }
        .box:hover img:nth-child(10){
            transform: rotate(30deg);
        }
        .box:hover img:nth-child(11){
            transform: rotate(40deg);
        }
        .box:hover img:nth-child(12){
            transform: rotate(50deg);
        }
        .box:hover img:nth-child(13){
            transform: rotate(60deg);
        }

    </style>

<div class="box">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
    <img src="5.jpg" alt="">
 </div>