CSS3 照片墙

<html>
    <head>
        <style type="text/css">
            .picture-wall-container{
                position: relative;
                margin:35px 15px 20px 20px;
            }
            .picture-container{
                position: absolute;
                padding:5px;
                background-color:white;
                box-shadow: gray 1px 1px 1px;
                transition: transform 0.3s;
            }
            #picture-container-1{
                left:930px;
                top:270px;
                z-index: 1;
                transform: rotate(13deg);
            }
            #picture-container-1:hover{
                z-index:4;
                transform:rotate(0deg);
            }
            #picture-container-2{
                left:190px;
                top:170px;
                z-index: 2;
                transform: rotate(-5deg);
            }
            #picture-container-2:hover{
                z-index:4;
                transform:rotate(0deg);
            }
            #picture-container-3{
                left:840px;
                top:260px;
                z-index: 3;
                transform: rotate(5deg);
            }
            #picture-container-3:hover{
                z-index:4;
                transform:rotate(0deg);
            }
            #picture-container-4{
                left:600px;
                top:280px;
                z-index: 1;
                transform: rotate(-5deg);
            }
            #picture-container-4:hover{
                z-index:4;
                transform:rotate(0deg);
            }
            #picture-container-5{
                left:343px;
                top:250px;
                z-index: 3;
                transform: rotate(3deg);
            }
            #picture-container-5:hover{
                z-index:4;
                transform:rotate(0deg);
            }
            #picture-container-6{
                left:0px;
                top:300px;
                z-index: 1;
                transform: rotate(-5deg);
            }
            #picture-container-6:hover{
                z-index:4;
                transform:rotate(0deg);
            }
            #picture-container-7{
                left:940px;
                top:62px;
                z-index: 3;
                transform: rotate(-10deg);
            }
            #picture-container-7:hover{
                z-index:4;
                transform:rotate(0deg);
            }
            #picture-container-8{
                left:612px;
                top:29px;
                z-index: 2;
                transform: rotate(8deg);
            }
            #picture-container-8:hover{
                z-index:4;
                transform:rotate(0deg);
            }
            #picture-container-9{
                left:0px;
                top:0px;
                z-index: 1;
                transform: rotate(5deg);
            }
            #picture-container-9:hover{
                z-index: 4;
                transform:rotate(0deg);
            }
            #picture-container-10{
                left:360px;
                top:41px;
                z-index: 2;
                transform: rotate(-5deg);
            }
            #picture-container-10:hover{
                z-index:4;
                transform:rotate(0deg);
            }
        </style>
    </head>
    <body>
        <div class="picture-wall-container">
            <ul>
                <li class="picture-container" id="picture-container-1"><img src="imgs/1.png" /></li>
                <li class="picture-container" id="picture-container-2"><img src="imgs/2.png" /></li>
                <li class="picture-container" id="picture-container-3"><img src="imgs/3.png" /></li>
                <li class="picture-container" id="picture-container-4"><img src="imgs/4.png" /></li>
                <li class="picture-container" id="picture-container-5"><img src="imgs/5.png" /></li>
                <li class="picture-container" id="picture-container-6"><img src="imgs/6.png" /></li>
                <li class="picture-container" id="picture-container-7"><img src="imgs/7.png" /></li>
                <li class="picture-container" id="picture-container-8"><img src="imgs/8.png" /></li>
                <li class="picture-container" id="picture-container-9"><img src="imgs/9.png" /></li>
                <li class="picture-container" id="picture-container-10"><img src="imgs/10.png" /></li>
            </ul>
        </div>
    </body>
</html>
posted on 2015-08-24 16:31 Admin_csq 阅读(199) 评论(0) 收藏举报