jQuery和css3控制箭头丝滑旋转

问题： 我们经常会遇见点击一个小三角使之丝滑的旋转180度上下旋转，怎么实现呢,需要css3搭配jq 来处理

如图：1.点击前 2.点击后（效果丝滑旋转）

               

1.html 页面内容

<div class="user-list-title">标准点播-<small>体验版</small>

<img src="http://i1.letvimg.com/lc07_lecloud/201610/09/11/32/userCenter/jiantoublue1.png" class="user-arrow">

</div>

2.css 内容

.user-arrow{//这是箭头的样式

width:12px;

position:absolute;

right:26px;

margin-top: 8px;

cursor:pointer;

display:inline-block;//放箭头的标签一定是块级元素

}

.rotate{

transform-origin:center center; //旋转中心要是正中间 才行

transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transition: transform 0.2s; //过度时间 可调

-moz-transition: -moz-transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-o-transition: -o-transform 0.2s;

-ms-transition: -ms-transform 0.2s;

}

.rotate1{

transform-origin:center center;

transform: rotate(0deg); //返回原点

-webkit-transform: rotate(0deg);

-moz-transform: rotate(deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transition: transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-moz-transition: -moz-transform 0.2s;

-o-transition: -o-transform 0.2s;

-ms-transition: -ms-transform 0.2s;

}

3.jq 处理方法

$(function() {

var usercenter = {

init:function(){

this.modal();

},

modal: function() {

$(".user-arrow").click(function(){

if($(this).hasClass("rotate")){ //点击箭头旋转180度

$(this).removeClass("rotate");

$(this).addClass("rotate1");

}else{

$(this).removeClass("rotate1"); //再次点击箭头回来

$(this).addClass("rotate");

}

})

}

}

usercenter.init();

})