美文网首页
扑克案例

扑克案例

作者: 琪33 | 来源:发表于2018-04-26 16:11 被阅读0次
    <style>
            body{
                overflow: hidden;
            }
            .box{
                width: 310px;
                height: 441px;
    
                margin:100px auto;
                position: relative;
                
            }
    
            /*.img1{*/
                /*transition:all 1s;*/
                /* 变换中心*/
                /*
                    transform-origin:
                    left top center  right  bottom
                    50px 50px
                */
                /*transform-origin:center bottom;*/
            /*}*/
    
        .box img{
            position: absolute;
            left:0;
            top:0;
            transition:all 1s;
    
            /* 设置变换中心*/
            transform-origin: center bottom;
            box-shadow: 1px 1px 3px 1px #333;
    
        }
    
            .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/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
            <img  src="images/pk2.png" alt=""/>
        </div>
    </body>
    

    相关文章

      网友评论

          本文标题:扑克案例

          本文链接:https://www.haomeiwen.com/subject/zdbelftx.html