CSS3transform制作漂亮的照片墙

一款利用css3的transform属性制作的照片墙特效，配合角度变化，渲染出照片级的效果。

html:

    <div class="container">
        <div class="photowall">
            <div class="photo01">
                <div class="photoview">
                    <img src="img/1.jpg" alt="">
                    <p>完美的星空</p>
                    <p>做最好的自己</p>
                </div>
            </div>
            <div class="photo02">
                <div class="photoview">
                    <img src="img/2.jpg" alt="">
                    <p>海边的黄昏</p>
                     <p>人当如荷自清香</p>
                </div>
            </div>
            <div class="photo03">
                <div class="photoview">
                    <img src="img/3.jpg" alt="">
                    <p>城市的落日余晖</p>
                    <p>纪念逝去的光阴</p>
                </div>
            </div>
            <div class="photo04">
                <div class="photoview">
                    <img src="img/4.jpg" alt="">
                    <p>大海的星空</p>
                    <p>童年中的轮船</p>
                </div>
            </div>
        </div>
    </div>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-image: url('./img/bg.jpg');
            background-size: cover;
            overflow: hidden;
        }
        .container{
            width: 100%;
            height: 100%;
        }
        .photowall{
            width: 100%;
            height: 100%;
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            outline: 1px dashed red;
        }
        .photoview{
            padding: 10px 10px 20px 10px;
            margin: 5px;
            background-color: #f2eada;
            text-align: center;
            font-size: 20px;
            box-shadow:0.2em 0.2em 0.8em #130c0e;
            position: relative;
        }
        .photoview img{
            width: 300px;
            height: 220px;
        }
        .photoview p{
            margin-top: 5px;
        }
        .photo01{
            transform-origin: right bottom;
            transform: rotate(10deg);
        }
        .photo02{
            transform-origin: right bottom;
            transform: rotate(-20deg);
        }
        .photo03{
            transform-origin: left top;
            transform: rotate(20deg);
        }
        .photo04{
            transform-origin: left bottom;
            transform: rotate(-20deg);
        }
    </style>