Day17-小功能系列:盒子的旋转

Day17-小功能系列:盒子的旋转

---

功能描述：当鼠标放在盒子上，盒子进行顺时针转动，转动完一圈后停止；当鼠标移开，盒子进行逆时针转动，回到初始位置停止。

---

1.HTML界面

前端界面和简单，随便创建一个div

<div class="test">这是旋转的盒子</div>

---

2.Css样式

主要将创建的div变成一个圆形，当然可有可无。

.test{
   
	width:100px;
	height:100px;
	text-align:center;
	font-size:12px;
	line-height:100px;
	border:1px solid #000;
	border-radius:50px;
}

3.JavaScript代码

主要的功能实现。
程序思路：首先获取这个div并添加hover方法。【注：hover方法包括两个函数，一个移入，一个移出】

$(".test").hover(function(){
   },function(){
   });

在移入方法中再次获取div，并添加css样式：transform:rotate()。

$(".test").hover(function(){
   
	$(".test").css({
   transform:"rotate()"})