1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
这是一个拖动元素的效果<div id="div" style="width:100pxheight:100pxbackground-color:redposition: absolutecursor: move">
</div>
<script>
window.onload=function(){
var div=document.getElementById("div")
div.onmousedown=function(e){ //把onmousedown改成onclick就是你要的效果
var x= e.clientX-div.offsetLeft
var y= e.clientY-div.offsetTop
document.onmousemove=function(e){
div.style.left= e.clientX-x+"px"
div.style.top= e.clientY-y+"px"
}
document.onmouseup=function(){
document.onmousemove=null
}
}
}
</script>
