jQuery实现箭头旋转怎么做的？

答案:2 悬赏:0 手机版

解决时间 2021-01-10 03:55

提问者网友：留有余香
2021-01-09 15:23

jQuery实现箭头旋转怎么做的？

最佳答案

五星知识达人网友：长青诗
2021-01-09 16:59

用css吧，CSS就行的，例如：
顺时针旋转90度：

-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);其它度数请自行修改下，可以用在LOGO之类的Hover效果，360度的话，参考下：

p img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

img{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
}

img:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}追问没事了看懂了谢谢追答既然采纳了，不会让你失望：
CSS
.coolwp2{
width:20%;
height:300px;
margin-left:40%;
margin-top:60px;
background:-webkit-gradient(linear, 60% 95%, 31% 20%, from(#00A1FF), to(#00A000));
color:#fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-animation: coolwpAnimation 1s  infinite ease-in-out;
-moz-animation: coolwpAnimation 1s  infinite ease-in-out;
-o-animation: coolwpAnimation 1s  infinite ease-in-out;
}
@-webkit-keyframes coolwpAnimation {
from { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes coolwpAnimation {
from { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes coolwpAnimation {
from { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
}HTML
Hello!U!

全部回答

1楼网友：西岸风
2021-01-09 17:12

用css吧，CSS就行的，例如：
顺时针旋转90度：
1
2
3
4
5

-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
其它度数请自行修改下，可以用在LOGO之类的Hover效果，360度的话，参考下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

p img{
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

img{
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
}

img:hover{
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息