网页制作图片旋转（用Javascript使网页图片产生旋转效果）

本文目录

• 用Javascript使网页图片产生旋转效果
• 在dreamweaver中怎样实现图片翻转360°
• 我想在网页上实现一个小图片在不停的旋转的效果，就在那儿不停的360度转啊转的样子
• css网页中图片旋转90度 并适应div
• dreamweaver 怎么旋转图片啊,就是把图片在网页上旋转90度显示,悬赏80分,在线等

用Javascript使网页图片产生旋转效果

　　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》《/》

在dreamweaver中怎样实现图片翻转360°

旋转问题：
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
定位问题：
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
如果是变换的话，需要加上
transition-property: all 0.3s ease;
transition-duration: 1s;
CSS3,就是这么任性~~

我想在网页上实现一个小图片在不停的旋转的效果，就在那儿不停的360度转啊转的样子

下面是用css旋转图片，用js换className。

换图片地址后试试。

《html》
《head》
《style》
.css-turn-0{
    -moz-transform:matrix(1,0,0,1,0,0);
    -o-transform:matrix(1,0,0,1,0,0);
    -webkit-transform:matrix(1,0,0,1,0,0);
    transform:matrix(1,0,0,1,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod=’auto expand’)"
}
.css-turn-270{
    -moz-transform:matrix(0,-1,1,0,0,0);
    -o-transform:matrix(0,-1,1,0,0,0);
    -webkit-transform:matrix(0,-1,1,0,0,0);
    transform:matrix(0,-1,1,0,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod=’auto expand’)"
}
.css-turn-180{
    -moz-transform:matrix(-1,0,0,-1,0,0);
    -o-transform:matrix(-1,0,0,-1,0,0);
    -webkit-transform:matrix(-1,0,0,-1,0,0);
    transform:matrix(-1,0,0,-1,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, SizingMethod=’auto expand’)"
}
.css-turn-90{
    -moz-transform:matrix(0,1,-1,0,0,0);
    -o-transform:matrix(0,1,-1,0,0,0);
    -webkit-transform:matrix(0,1,-1,0,0,0);
    transform:matrix(0,1,-1,0,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, SizingMethod=’auto expand’)"
}
《/style》
《/head》
《body》
《img src="图片地址"》
《script》
    var img = document.getElementsByTagName(’img’),
        i = 1,
        css = ;
 
    img.onclick = function () {
        this.className = css;
    }
《/script》
《/body》
《/html》

转自 zhaoapk 的回答。

css网页中图片旋转90度 并适应div

代码如下：

《!DOCTYPE html》

《html》

《head》

《title》CSS3旋转图片《/title》

《style》

demo {

width: 100px;

height: 75px;

background-color: yellow;

border: 1px solid black;

margin:20px;

}

#div2 {

transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-moz-transform: rotate(30deg); /* Firefox */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

-o-transform: rotate(30deg); /* Opera */

}

#div3 {

transform: rotate(90deg);

ms-transform: rotate(90deg); /* IE 9 */

moz-transform: rotate(90deg); /* Firefox */

webkit-transform: rotate(90deg); /* Safari and Chrome */

o-transform: rotate(90deg); /* Opera */

}

《/style》

《/head》

《body》

《div class="demo" id="div1"》你好。这是一个 div 元素。《/div》

《div style="clear:both"》《/div》

《div class="demo" id="div2"》你好。这是一个 div 元素。《/div》

《div style="clear:both"》《/div》

《div class="demo" id="div3"》你好。这是一个 div 元素。《/div》

***隐藏网址***

90°旋转后的图片

***隐藏网址***

《/body》

《/html》

代码呈现的结果如下图：

扩展资料

CSS图片旋转注意事项

1、图片的旋转可以说是一种效果，但是逐渐的，旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。我们都知道，照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。

2、这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。但是，现在直接就可以在web上对图片进行旋转之类的处理，就算图片处理软件再怎么方便好用，也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。我们可以在新浪微博上见到这种图片旋转的功能。

dreamweaver 怎么旋转图片啊,就是把图片在网页上旋转90度显示,悬赏80分,在线等

• 如果只是为了减少加载时间 你可以拿PS对图片进行优化，再把如片切成小片放入 （非必须）

• dreamweaver没有办法旋转图片,你可以使用做图的软件先把图片旋转了.再应用到dreamweaver!!!
  dreamweaver只是写网页代码,而代码里面没有可以倒置图片的这一项.
  记得以前使用java弄过.不过现在JAVA在网页已经很少使用了,因为电脑必须装VM才能识别.