点击旋转，再点击恢复初始状态

今天遇到要做一个点击 + 然后开始旋转动画后变成 x    具体实现如下

1.HTML

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

2.CSS

.box{                //普通样式

　　width:100px;

　　height:100px;

　　background:skyblue;

}

.rotate1{             //旋转后的位置

　　transform:rotate(45deg);

　　transtion:all .3s linear;

}

.rotate{                   //初始状态的旋转位置

　　transform:rotate(0);

　　transtion:all .3s linear;

}

3.JQ

<script>

　　$(function(){

　　　　$(".box").click(function(){

　　　　　if($(this).hasClass("rotate")){

　　　　　　$(this).removeClass("rotate").addClass("rotate1");

　　　　　}else{

　　　　　　$(this).removeClass("rotate1").addClass("rotate");

　　　　　}

　　　　})

　　})

</script>

点击旋转，再点击恢复初始状态

原文：http://www.cnblogs.com/zjjDaily/p/7826286.html