旋转动画实现的问题，为什么最终有角度变化，但是没旋转进入的效果？求大神解答~~

Question

<figure class="img2">

<img src="2.jpg">

<figcaption>

<h2>旋转动画</h2>

<p>图片的注解</p>

<div></div>

</figcaption>

</figure>

/*css部分*/

.img2{

background: #ddd;

}

.img2 figcaption{

width: 100%;  

height: 100%;

}

.img2 figcaption div{    

width: 60%;

height: 60%;

border: 3px solid #aaa;

position: absolute;

left: 10%;

top: 10%; 

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

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

transform:translate(0px,600px) rotate(0deg);

}

.img2:hover figcaption div{

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

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

transform:translate(0px,0px)  rotate(340deg);

}

.img2:hover img{

opacity: 0.3;  /*图片透明度*/

}

.img2 figcaption h2{

margin-left: 15%;

margin-top: 15%;

}

.img2 figcaption p{

margin-left: 15%;

transform:translate(0px,10px);

opacity: 0;   /*开始时隐藏p标签*/

}

.img2:hover figcaption p{

transform:translate(0px,0px);

opacity: 1;  

}