图片动画-倾斜

CSS：

 body, figure, figcaption {
            margin: 0;
            padding: 0;
        }


        figure {
            position: relative;
            width: 33.33%;
            height: 350px;
            overflow: hidden;
            float: left;
        }


        figcaption {
            position: absolute;
            top: 0px;
            left: 0px;
            color: #fff;
            font-family: "微软雅黑";
        }


        figure img {
            opacity: 0.9;
            transition: all 0.35s;
        }


        figure figcaption p, h2, span, div {
            transition: all 0.35s;
        }

  .test3 {
            background: #000;
        }


            .test3 figcaption {
                top: 30%;
                left: 40%;
            }


            .test3:hover img {
                opacity: 0.5;
            }


            .test3 figcaption h2 {
                transform: skew(90deg);
            }


            .test3:hover figcaption h2 {
                transform: skew(0deg);
            }


            .test3 figcaption p {
                transform: skew(90deg);
                transition-delay: 0.2s;
            }


            .test3:hover figcaption p {
                transform: skew(0deg);
            }

Body：

<figure class="test3">
        <img src="phto/u=159389783,3102223341&fm=214&gp=0.jpg" />
        <figcaption>
            <h2>倾斜动画</h2>
            <p>图片倾斜动画注解</p>
        </figcaption>
    </figure>