dh01
/
zpq.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width:960px;
            margin:200px auto;
            position:relative;
        }
        .container img{
            width:300px;
            height:200px;
            position:absolute;
            transition:1s;
            z-index:1;
        }
        .container img:nth-of-type(1){
            top:10px;left:100px;
            transform:rotate(20deg);
         }
         .container img:nth-of-type(2){
            top:-100px;left:500px;
            transform:rotate(5deg);
         }
         .container img:nth-of-type(3){
            top:15px;left:50px;
            transform:rotate(5deg);
         }
         .container img:nth-of-type(4){
            top:-10px;left:50px;
            transform:rotate(59deg);
         }
         .container img:nth-of-type(5){
            top:9px;left:300px;
            transform:rotate(33deg);
         }
         .container img:nth-of-type(6){
            top:55px;left:459px;
            transform:rotate(180deg);
         }
         .container img:nth-of-type(7){
            top:55px;left:460px;
            transform:rotate(99deg);
         }
         .container img:nth-of-type(8){
            top:55px;left:220px;
            transform:rotate(39deg);
         }
         .container img:nth-of-type(9){
            top:55px;left:330px;
            transform:rotate(89deg);
         }
         .container img:nth-of-type(10){
            top:50px;left:220px;
            transform:rotate(19deg);
         }
       .container img:hover{
           z-index:2;
           box-shadow:5px 5px 5px #ddd;
           transform:rotate(0deg) scale(1.5);
       }


    </style>
</head>
<body>
    <div class="container">
        <img class="p1" src="1.jpg"/>
        <img class="p2" src="2.jpg"/>
        <img class="p3" src="3.jpg"/>
        <img class="p4" src="4.jpg"/>
        <img class="p5" src="5.jpg"/>

        <img class="p6" src="6.jpg"/>
        <img class="p7" src="7.jpg"/>
        <img class="p8" src="8.jpg"/>
        <img class="p9" src="9.jpg"/>
        <img class="p10" src="10.jpg"/>
    </div>
</body>
</html>