jq 点击图片旋转90度

 

css:

 .toggle_con {
            width: .573333rem;
            height: .6rem;
            .show_nav_content {
                position: absolute;
                width: .573333rem;
                height: .6rem;
            }
        }
.rotate {

    transform-origin: center center; //旋转中心要是正中间 才行
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    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;

}

js:

$(function () {

    var usercenter = {

        init: function () {
            this.modal();
        },

        modal: function () {
            $(".show_nav_content").click(function () {
                if ($(this).hasClass("rotate")) { //点击箭头旋转90度
                    $(this).removeClass("rotate");
                    $(this).addClass("rotate1");
                } else {
                    $(this).removeClass("rotate1"); //再次点击箭头回来
                    $(this).addClass("rotate");
                }
            })

        }

    }

    usercenter.init();

})