問題： 我們經常會遇見點選一個小三角使之絲滑的旋轉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();

})