<img src="img/altimg05.jpg">
<figcaption>
<h2>图片标题</h2>
<p>这里是图片的相关描述内容</p>
<p>这里是图片的相关描述内容</p>
<p>这里是图片的相关描述内容</p>
</figcaption>
</figure>
demo02 说明：鼠标移入后 图片变模糊 矩形从图片外旋转进入图片中指定位置 文字从右侧飞过来 并逐渐显示
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式（矩形文字都在图片上）；
2.将矩形通过transform属性位移到上方 看不到为止 并设置旋转的角度为0 transform: translate(0,-400px) rotate(0deg)；
3.接下来设置鼠标移入时(:hover)的样式 位移设置为0并旋转360度 transform: translate(0,0) rotate(360deg);
/*旋转*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption div{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}
.test2:hover figcaption div{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}
<!--旋转-->
<figure class="test2">
<img src="img/altimg05.jpg">
<figcaption>
<h2>图片标题</h2>
<p>飞来飞去</p> <div></div>
</figcaption>
</figure>
demo03 说明：鼠标移入后 扭曲的字正常显示（因为例子中扭曲了90度 所以视觉上看不到文字）
步骤：
1.写好html代码并通过css设置好内容和图片的初始样式；
2.将文字内容扭曲90度 transform: skew(90deg)；
3.接下来设置鼠标移入时(:hover)的样式 将文字内容扭曲0度 transform: skew(0);
/*扭曲*/
.test3{background:#CCCCCC;}
.test3 figcaption{position: absolute;left:15%;top:15%}
.test3 figcaption h2{transform: skew(90deg);}
.test3 figcaption p{transform: skew(90deg);}
.test3:hover img{opacity: 0.6;}
.test3:hover figcaption h2{transform: skew(0);}
.test3:hover figcaption p{transform: skew(0);}
<!--扭曲-->
<figure class="test3">
<img src="img/altimg05.jpg">
<figcaption>
<h2>图片标题</h2>
