css相册旋转效果

直接上图：

鼠标滑过

css样式：

/*图片设置*/
.waterfallGrid {
    padding: 15px;
}
.post-photo {
    background: #fff;
    position: relative;
    border-bottom: 1px solid transparent;
    box-shadow: 0 4px 8px rgba(0,0,0,.06);
    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.06);
    border-radius: 4px;
    margin: 0;
    transition: .4s;
}
.col-lg-3 {
    width: 25%;
}
.post-photo.album:hover:before {
    transform: rotate(3deg) translateX(14px);
    transition: .25s;
}
.post-photo.album:hover:after {
    transform: rotate(1.5deg) translateX(7px);
    transition: .25s;
}
.post-photo.album:before {
    content: "";
    background: #fff;
    border-bottom: 1px solid transparent;
    box-shadow: 0 4px 8px rgba(0,0,0,.06);
    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.06);
    border-radius: 4px;
    display: block;
    position: absolute;
    top: 7px;
    left: 4px;
    height: 100%;
    width: calc(100% - 8px);
    z-index: -1;
    transition: .4s;
}
.post-photo.album:after {
    content: "";
    background: #fff;
    border-bottom: 1px solid transparent;
    box-shadow: 0 4px 8px rgba(0,0,0,.06);
    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.06);
    border-radius: 4px;
    display: block;
    position: absolute;
    top: 4px;
    left: 2px;
    height: 100%;
    width: calc(100% - 4px);
    z-index: -1;
    transition: .4s;
}
.post-photo .img {
    padding: 7px;
}
.post-photo .img div{
    background-size: cover;
    background-position: center center;
}
.post-photo .title {
    margin: 8px 0 12px;
    font-size: 16px!important;
    font-weight: bold!important;
    padding-left: 12px;
    line-height: 24px;
    border-left: 3px solid currentColor;
    color: #50585f;
    transition: .4s;
}
.post-photo .title1 {
    float:right;
    font-size: 16px!important;
    font-weight: bold!important;
    margin-right: 8px;
    line-height: 24px;
    color: #50585f;
    transition: .4s;
}

html内容

<div class="col-lg-3">
				<div class="col-xs-6 waterfallGrid">
		    <a href="show-990.html" target="_blank">
                <div class="post-photo album">
                    <div class="img">
                        <div>
                            <img src="https://api.ixiaowai.cn/gqapi/gqapi.php" alt="桃花杏花海棠花" ratio="1" realratio="1">
                        </div>
                    </div>
                    <h3 class="title">桃花杏花海棠花..<span class="si si-picture title1">共41张</span></h3>
                </div>
            </a>
        </div>
        </div>