扑克牌案例

来源：互联网发布：怎么解绑mac地址编辑：程序博客网时间：2024/06/10 16:06

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            /*background-color: #eee;*/
        }
        .box{

            width: 300px;
            height: 440px;
            margin:100px auto;
            position: relative;
        }
        img{
            width: 100%;
            transition:all 1s;
            position: absolute;
            left:0;
            top:0;
            /* transform-origin：变换中心默认是图片几何中心*/
            /*transform-origin ：水平坐标垂直坐标 */

/*transform-origin: 50px 50px;*/
transform-origin: center bottom;

box-shadow: 0 0 3px 0 #666;
}

        .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>
</head>
<body>
    <div class="box">
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
        <img src="images/pk1.png" />
    </div>
</body>
</html>

0 0