1 图片的旋转实现方式有很多，比如js实现，现在比较简单的方法是使用css3里面的；transform属性来实现，很方便的。其实这个题目很简单，在百度里面搜索一下css3旋转就看到了，里面的手册介绍的很清楚，下面是代码以及显示效果都呈现出来；
2 下面是写的一个实例代码，代码可以直接运行。代码的解释有备注哦；总共代码呢其实没有几行，主要就是 transform属性的应用 代码中的90deg就是90度的意思
<!DOCTYPEhtml>
<html>
<head>
<style>
body{margin:0pxpadding:0px}
/*{transform就是专门为img图片设置的旋转*/
#img1{transform:rotate(90deg)border:1pxsolidred}
</style>
</head>
<body>
<imgid="img1"src="38.png"/>/*页面中显示的图片*/
</body>
</html>
3代码在浏览器的运行效果图：
1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
/* css3 让一个图片不断翻转示例代码 */#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover
/* 随便设置宽高值，测试 */
width:200px
height:200px
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0)
-moz-transform:translate3d(0,0,0)
transform:translate3d(0,0,0)
/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放 */
-webkit-animation:play 3s linear infinite
-moz-animation:play 3s linear infinite
animation:play 3s linear infinite
}
@-webkit-keyframes play{
0% {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg)
/*
垂直翻转
-webkit-transform:rotateX(0deg)
顺时针旋转
-webkit-transform:rotate(0deg)
逆时针旋转
-webkit-transform:rotate(0deg)
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg)
/* 垂直翻转
-webkit-transform:rotateX(360deg)
顺时针旋转
-webkit-transform:rotate(360deg)
逆时针旋转
-webkit-transform:rotate(-360deg)
*/
}
}
@-moz-keyframes play{
0% {
-moz-transform:rotateY(0deg)
/*
-moz-transform:rotateX(0deg)
-moz-transform:rotate(0deg)
-moz-transform:rotate(0deg)
*/
}
100% {
-moz-transform:rotateY(360deg)
/*
-moz-transform:rotateX(360deg)
-moz-transform:rotate(360deg)
-moz-transform:rotate(-360deg)
*/
}
}
@keyframes play{
0% {
transform:rotateY(0deg)
/*
transform:rotateX(0deg)
transform:rotate(0deg)
transform:rotate(0deg)
*/
}
100% {
transform:rotateY(360deg)
/*
transform:rotateX(360deg)
transform:rotate(360deg)
transform:rotate(-360deg)
*/
}
} <!-- html 布局代码 -->
<div id="gavinPlay"></div>
