用2d旋转写展开纸牌用css 的rotate旋转属性和transform-origin:和过渡属性等实现扑克牌的移入展开

   <style>
        ul{
            width:100px;
            height: 150px;
            border: 1px solid 2px;
            margin: 100px auto;
            position: relative;
            
        }
        ul img{
            position: absolute;
            top: 0;
            transform-origin:center bottom;
            /*旋转围绕的点为 图片的水平居中，垂直居下的点 */
            
            transition: all 2s;
            /*过渡 所有属性 2秒 */
        }
        /* 下面写每张牌旋转10度*/
        ul:hover img:nth-child(1){
            transform: rotate(-60deg);
        }
        ul:hover img:nth-child(2){
            transform: rotate(-50deg);
        }
        ul:hover img:nth-child(3){
            transform: rotate(-40deg);
        }
        ul:hover img:nth-child(4){
            transform: rotate(-30deg);
        }
        ul:hover img:nth-child(5){
            transform: rotate(-20deg);
        }
        ul:hover img:nth-child(6){
            transform: rotate(-10deg);
        }
        ul:hover img:nth-child(7){
            transform: rotate(0deg);
        }
        ul:hover img:nth-child(8){
            transform: rotate(10deg);
        }
        ul:hover img:nth-child(9){
            transform: rotate(20deg);
        }
        ul:hover img:nth-child(10){
            transform: rotate(30deg);
        }
        ul:hover img:nth-child(11){
            transform: rotate(40deg);
        }
        ul:hover img:nth-child(12){
            transform: rotate(50deg);
        }
        ul:hover img:nth-child(13){
            transform: rotate(60deg);
        }
    </style>
</head>
<body>
    <ul class="box">
        <img src="c-1.png" alt="">
        <img src="c-2.png" alt="">
        <img src="c-3.png" alt="">
        <img src="c-4.png" alt="">
        <img src="c-5.png" alt="">
        <img src="c-6.png" alt="">
        <img src="c-7.png" alt="">
        <img src="c-8.png" alt="">
        <img src="c-9.png" alt="">
        <img src="c-10.png" alt="">
        <img src="c-11.png" alt="">
        <img src="c-12.png" alt="">
        <img src="c-13.png" alt="">
    </ul>
</body>