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

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;  }