1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
恩恩，看了你的这个预期效果！这是我的代码，你可以看看，可以实现这个效果：
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title>AlloyTeanm-zy</title>
<script src="jquery-1.11.1.js"></script>
<style type="text/css">
body{
font-family: simhei
overflow: hidden
}
#div1{
overflow:hidden
}
#pic{
position: relative
overflow: hidden
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#pic").load(function() {
$("#pic").animate({width:'1520px',height:'700px',top:'-10px',left:'-5px',bottom:'0px',right:'-10px'},8000)
})
})
</script>
</head>
<body>
<div style="width: 1600px height: 700px" >
<img src="05.jpg" id="pic" style="width: 1700pxheight: 800pxtop:-100pxleft: -100px">
</div>
</body>
</html>
需要注意的几点：
1.我用的是jQuery，需要引入外部jQuery库！
<script src="jquery-1.11.1.js"></script>
2.图片的原始大小，以及屏幕的大小都会影响这个效果！
3.这些top属性和left属性，都是根据我的图片和屏幕调的，具体的值，你要根据自己的情况更改，反正原理就这样！原理是，将图片的长度和宽度调的比屏幕窗口或者DIV大，也就是让图片“溢”出来，多的部分使用“overflow：hidden”隐藏掉，然后在让图片他恢复和窗口或者DIV一样大尺寸，就会产生图片拉远的效果！
有不懂的地方继续问我！
希望能帮助到你，望采纳！
首先准备以下的东西：
1、图片若干，并规范化图片名字。从1开始。
2、在存放图片的文档中新建一个txt。
3、在txt中输入内容。
4、txt后缀改为html，完成
txt的内容：
<script>
var i
function pre()
{
if(i==1)return
i--
document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"
}
function next()
{
i++
document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"
}
</script>
<body>
<div onclick="pre()"><</div>
<div id="pic" ><</div>
<div onclick="next()">></div>
</body>
