                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /CSS3图片动态提示效果

为什么我的实现不了360度旋转的效果呢

旋转动画效果是否支持google预览

夏末之央

2015-09-10

源自：CSS3图片动态提示效果 3-2

关注问题我要回答

1540

操作

收起

3 回答

june18th
2015-12-31

因为他是回归原点的（像360,720，等），没有设置过度时间是看不到旋转过程的！

如果不设置过度时间也可以，但是你需要把你的旋转度数改为：30，40,60，等等其他值（只要他最终不会旋转到原位就可以的）

0 回复有任何疑惑可以回复我~

收起回答

june18th
2015-12-31

除了注意楼上写的，另外你还需要注意看是否设置了动画

figure figcaption p,h2,div

{

transition:all 0.35s;

-ms-transition:all 0.35s;

-webkit-transition:all 0.35s;

}

1 回复有任何疑惑可以回复我~

收起回答

晓晓晓晓丶vv
2015-10-19

先设置rotate(0deg),之后设置hover时的rotate(360deg)比如如下:

.simg figcaption div{
    width: 80%;
    height: 70%;
    border: 2px solid #fff;
    position: absolute;
    top: 5%;
    left: 5%;
    transform: translate(0,-300px) Rotate(0deg);
    transition: all,0.5s;
}
.simg:hover figcaption div{
    transform: translate(0px,0px) Rotate(180deg);
}

0 回复有任何疑惑可以回复我~

收起回答