<figure class="tis1">

<figure class="tis2">

<img src="../img/胡歌6.jpg"/>

<figcaption>

<h2>旋转动画</h2>

<p>飞来飞去，漫天飞舞</p>

<div></div>

</figcaption>

</figure>

.tis2 {background: #9C9C9C;}

.tis2 figcaption{width: 100%; height: 100%;}

.tis2 figcaption h2{margin-top: 15%;margin-left: 15%;}

.tis2 figcaption p{margin-left: 15%;transform:translate(0px,50px);opacity: 0;}

.tis2 figcaption div{

border: 2px solid #FFFFFF;

width: 80%;

height: 80%;

position: absolute;

top: 10%; 

left: 10%;

transform: translate(0px,-350px) rotate(0deg);

}

.tis2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);}

.tis2:hover figcaption p{transform:translate(0px,0px);opacity:1;}