使用html css实现180箭头旋转,jQuery和css3控制箭头丝滑旋转

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

}