1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
Rotation滤镜可以使图片产生旋转效果 注意必须是IE 及IE 才能看到！
<><head><meta equiv= Content Type content= text/charset=gb ><style>body img{border: gold ridge}</style>//给图片加上边框的CS代码<title>用Javascript使网页图片产生旋转效果</title><script language= javascript >var i= function playImg() {image style filter= progid:DXImageTransform Microsoft BasicImage( Rotation= +i+ ) i++if (i>){i= } mytimeout=setTimeout( playImg() ) }</script>//以上是使图片实现四个方向转换的代码</head><body bgcolor= #FFFFFF text= # onload= playImg() >//修改body为加载就显示效果<img src= /img/ jpg width= height= name= image ></body></body></>
<><head><meta <fp class='fp-dciy0'></fp>equiv=<fp class='fp-amv49'></fp>Content<fp class='fp-f5w9g'></fp>Type<fp class='fp-w9plq'></fp>content=<fp class='fp-amv49'></fp>text/charset=gb<fp class='fp-ehg6a'></fp><fp class='fp-n7ug1'></fp><fp class='fp-btu1b'></fp><fp class='fp-iotbu'></fp><fp class='fp-xx6ow'></fp>><style>body img{border:<fp class='fp-n7ug1'></fp>gold ridge}</style><title>用Javascript使网页图片产生旋转效果</title><script language=<fp class='fp-xx6ow'></fp>javascript<fp class='fp-mjedv'></fp>>var i=<fp class='fp-hok65'></fp> function playImg() {image<fp class='fp-dtz44'></fp>style<fp class='fp-jc9e0'></fp>filter=<fp class='fp-w9plq'></fp>progid:DXImageTransform<fp class='fp-koyen'></fp>Microsoft<fp class='fp-gcw6i'></fp>BasicImage( Rotation=<fp class='fp-mjedv'></fp>+i+<fp class='fp-mjedv'></fp>)<fp class='fp-xx6ow'></fp>i++if (i><fp class='fp-fof3c'></fp>){i=<fp class='fp-t2lmv'></fp>} mytimeout=setTimeout(<fp class='fp-w9plq'></fp>playImg()<fp class='fp-xx6ow'></fp><fp class='fp-kvp60'></fp><fp class='fp-ywetk'></fp><fp class='fp-1rrrx'></fp><fp class='fp-7y9ya'></fp><fp class='fp-ylmr2'></fp>) }</script></head><body bgcolor=<fp class='fp-w9plq'></fp>#FFFFFF<fp class='fp-xx6ow'></fp>text=<fp class='fp-xx6ow'></fp>#<fp class='fp-ylmr2'></fp><fp class='fp-4gdww'></fp><fp class='fp-4gdww'></fp><fp class='fp-4gdww'></fp><fp class='fp-hok65'></fp><fp class='fp-ylmr2'></fp><fp class='fp-amv49'></fp>onload=<fp class='fp-w9plq'></fp>playImg()<fp class='fp-xx6ow'></fp>><img src=<fp class='fp-xx6ow'></fp>/img/<fp class='fp-ehg6a'></fp><fp class='fp-ylmr2'></fp><fp class='fp-4gdww'></fp><fp class='fp-fof3c'></fp><fp class='fp-7y9ya'></fp><fp class='fp-uq1o1'></fp><fp class='fp-n7ug1'></fp><fp class='fp-hok65'></fp><fp class='fp-ywetk'></fp><fp class='fp-gcw6i'></fp>jpg<fp class='fp-amv49'></fp>width=<fp class='fp-xx6ow'></fp><fp class='fp-btu1b'></fp><fp class='fp-h0c8o'></fp><fp class='fp-4gdww'></fp><fp class='fp-w9plq'></fp>height=<fp class='fp-amv49'></fp><fp class='fp-ywetk'></fp><fp class='fp-ehg6a'></fp><fp class='fp-ylmr2'></fp><fp class='fp-mjedv'></fp>name=<fp class='fp-amv49'></fp>image<fp class='fp-mjedv'></fp>></body></body></>
作者 lishixinzhi/Article/program/Java/Javascript/201311/25419
css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。
CSS代码如下：
.rotate{
-ms-transform:rotate(90deg)/* IE 9 */
-moz-transform:rotate(90deg)/* Firefox */
-webkit-transform:rotate(90deg)/* Safari and Chrome */
-o-transform:rotate(90deg)/* Opera */
}
浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）