html点击旋转180,关于点击三角丝滑旋转180度css3 jq处理方法

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

width:12px;htm

position:absolute;blog

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;

}