旋转动画实现的问题,为什么最终有角度变化,但是没旋转进入的效果?求大神
旋转动画
图片的注解
/*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;
} |
免责声明:本内容仅代表回答会员见解不代表天盟观点,请谨慎对待。
版权声明:作者保留权利,不代表天盟立场。
|
|
|
|