jQuery实现点击旋转，再点击恢复初始状态动画效果示例

<div class="box rotate"></div> <!--需要加一个初始状态-->

.box{        //普通样式　　width:100px;　　height:100px;　　background:skyblue;}.rotate1{       //旋转后的位置　　transform:rotate(45deg);　　transtion:all .3s linear;　　-webkit-transform:rotate(45deg);    //还是兼容一下　　-webkit-transtion:all .3s linear;}.rotate{          //初始状态的旋转位置　　transform:rotate(0);　　transtion:all .3s linear;　　-webkit-transform:rotate(0);　　-webkit-transtion:all .3s linear;}

<script>　　$(function(){　　　　$(".box").click(function(){　　　　　if($(this).hasClass("rotate")){　　　　　　　　$(this).removeClass("rotate").addClass("rotate1");　　　　　}else{　　　　　　$(this).removeClass("rotate1").addClass("rotate");　　　　　}　　　　})　　})</script>