網頁製作圖片如何旋轉_ps中如何旋轉圖片

A. 我想在網頁上實現一個小圖片在不停的旋轉的效果，就在那兒不停的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='autoexpand')"
}
.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='autoexpand')"
}
.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='autoexpand')"
}
.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='autoexpand')"
}
</style>
</head>
<body>
<imgsrc="圖片地址">
<script>
varimg=document.getElementsByTagName('img')[0],
i=1,
css=['css-turn-0','css-turn-90','css-turn-180','css-turn-270'];

img.onclick=function(){
this.className=css[i++%4];
}
</script>
</body>
</html>

轉自zhaoapk 的回答。

B. 電腦怎麼旋轉圖片

電腦中的圖片也是可以進行旋轉的。
雙擊圖片使用電腦中的圖片瀏覽器打開這個圖片。
點擊右鍵菜單，在右鍵菜單中選擇旋轉圖片。
這樣就可以選擇旋轉90度或翻轉圖片。這樣就可以完成圖片的旋轉或者翻轉了。

C. 網頁製作中如何做翻轉圖片

<SCRIPT language=JavaScript>
var IMGArray = new Array(5);
var TXTArray = new Array(5);
var TheIMGIndex=0;
var garTransitions = new Array(10);
var speed = 5000;
garTransitions[0] = "RandomDissolve()";
garTransitions[1] = "Iris(irisStyle='star', motion='out')";
garTransitions[2] = "Iris(irisStyle='diamond', motion='in')";
garTransitions[3] = "Iris(irisStyle='cross', motion='out')";
garTransitions[4] = "Iris(irisStyle='circle', motion='in')";
garTransitions[5] = "Iris(irisStyle='plus', motion='in')";
garTransitions[6] = "Barn(orientation='vertical', motion='in')";
garTransitions[7] = "Barn(orientation='vertical', motion='out')";
garTransitions[8] = "Barn(orientation='horizontal', motion='in')";
garTransitions[9] = "Barn(orientation='horizontal', motion='out')";
function IMGTXTChange(INC_Index)
{
var INCAOBJ,NCTDOBJ;
for(var I=0;I<5;I++)
{
INCAOBJ=eval("document.all.ChangeA" + I);
INCTDOBJ=eval("document.all.ChangeTD" + I);
if (INC_Index==I)
{
TheIMGIndex=I;
INCTDOBJ.style.backgroundColor='#0066ff';
INCAOBJ.style.color='#ffffff';
}
else
{
INCTDOBJ.style.backgroundColor='#333333';
INCAOBJ.style.color='#ffffff';
}
}

var INCImage=document.all.TheChangeIMG;
var FilterStr="progid:DXImageTransform.Microsoft." + garTransitions[INC_Index+1];
INCImage.style.filter = FilterStr;
INCImage.filters.item(0).Apply();
INCImage.filters.item(0).Play(2.0);
var TheTrunImage=new Image;TheTrunImage.src=IMGArray[INC_Index];
document.all.TheChangeIMG.src=TheTrunImage.src;
//document.all.ChangeTXTDIV.innerHTML=TXTArray[INC_Index];
}

IMGArray[0]="image/1.JPG";
IMGArray[1]="image/2.JPG";
IMGArray[2]="image/3.JPG";
IMGArray[3]="image/4.JPG";
IMGArray[4]="image/5.JPG";

function SwitchPiture()
{
TheIMGIndex++;
if (TheIMGIndex>4){TheIMGIndex=0}
IMGTXTChange(TheIMGIndex);
TimeTurn=setTimeout("SwitchPiture()",speed);
}

function MouseOver(INC_OBJ)
{
INC_OBJ.style.color='#990000';
INC_OBJ.style.textDecoration='underline';
}

function MouseOut(INC_OBJ)
{
INC_OBJ.style.color='#000000';
INC_OBJ.style.textDecoration='none';
}

// - 控制自動播放
function AutoPlay() {
speed = 3000;
SwitchPiture();
}
// - \控制自動播放

window.onload = function() {
AutoPlay();
}
</SCRIPT>
放到<head>之間

<DIV
style="BORDER-RIGHT: #0066ff 1px solid; BORDER-TOP: #0066ff 1px solid; BORDER-LEFT: #0066ff 1px solid; WIDTH: 307px; BORDER-BOTTOM: #0066ff 1px solid; POSITION: relative; HEIGHT: 100%; BACKGROUND-COLOR: #ffffff">
<DIV
style="BORDER-RIGHT: #ff0000 0px solid; BORDER-TOP: #ff0000 0px solid; BORDER-LEFT: #ff0000 0px solid; WIDTH: 307px; BORDER-BOTTOM: #ff0000 0px solid; HEIGHT: 173px; BACKGROUND-COLOR: #0000ff"><img
id=TheChangeIMG height=220 src="image/0.jpg"
width=307 name=TheChangeIMG></DIV>
<DIV
style="LEFT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 18px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: right">
<TABLE style="FONT-SIZE: 12px; HEIGHT: 18px; TEXT-ALIGN: center"
cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD id=ChangeTD0 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD0"><A id=ChangeA0
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(0) name=ChangeA0>1</A></TD>
<TD style="BACKGROUND-COLOR: #ffffff" width=1></TD>
<TD id=ChangeTD1 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD1"><A id=ChangeA1
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(1) name=ChangeA1>2</A></TD>
<TD style="BACKGROUND-COLOR: #ffffff" width=1></TD>
<TD id=ChangeTD2 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD2"><A id=ChangeA2
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(2) name=ChangeA2>3</A></TD>
<TD style="BACKGROUND-COLOR: #ffffff" width=1></TD>
<TD id=ChangeTD3 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD3"><A id=ChangeA3
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(3) name=ChangeA3>4</A></TD>
<TD style="BACKGROUND-COLOR: #ffffff" width=1></TD>
<TD id=ChangeTD4 style="BACKGROUND-COLOR: #000000" width=22
name="ChangeTD4"><A id=ChangeA4
style="FONT-WEIGHT: bold; CURSOR: hand; COLOR: #ffffff; TEXT-DECORATION: underline"
onclick=IMGTXTChange(4)
name=ChangeA4>5</A></TD></TR></TBODY></TABLE></DIV></DIV>
放到表格中;自己再修改一下圖片路徑!

D. HTML中，怎樣將圖片旋轉90度顯示

1 圖片的旋轉實現方式有很多，比如js實現，現在比較簡單的方法是使用css3裡面的；transform屬性來實現，很方便的。其實這個題目很簡單，在網路裡面搜索一下css3旋轉就看到了，裡面的手冊介紹的很清楚，下面是代碼以及顯示效果都呈現出來；

2 下面是寫的一個實例代碼，代碼可以直接運行。代碼的解釋有備注哦；總共代碼呢其實沒有幾行，主要就是 transform 屬性的應用代碼中的90deg就是90度的意思

<!DOCTYPE html>

<html>

<head>

<style>

body{margin:0px;padding:0px;}

/*{transform就是專門為img圖片設置的旋轉*/

#img1{transform:rotate(90deg); border:1px solid red;}

</style>

</head>

<body>

<img id="img1" src="38.png"/> /*頁面中顯示的圖片*/

</body>

</html>

3 代碼在瀏覽器的運行效果圖：

E. ps中如何旋轉圖片

PS水平翻轉的快捷鍵是ctrl+t。打開安裝好的ps軟體，然後打開一張圖片。用快速選擇工具把圖像選中，按住ctrl+j復制圖層。按住ctrl+t自由變換，點擊編輯－變換－水平翻轉。最後圖像水平翻轉就ok,完成效果圖。

Photoshop的專長在於圖像處理，而不是圖形創作。圖像處理是對已有的點陣圖圖像進行編輯加工處理以及運用一些特殊效果，其重點在於對圖像的處理加工；圖形創作軟體是按照自己的構思創意，使用矢量圖形等來設計圖形。

相關信息

從功能上看，該軟體可分為圖像編輯、圖像合成、校色調色及功能色效製作部分等。圖像編輯是圖像處理的基礎，可以對圖像做各種變換如放大、縮小、旋轉、傾斜、鏡像、透視等；也可進行復制、去除斑點、修補、修飾圖像的殘損等。

圖像合成則是將幾幅圖像通過圖層操作、工具應用合成完整的、傳達明確意義的圖像，這是美術設計的必經之路；該軟體提供的繪圖工具讓外來圖像與創意很好地融合。校色調色可方便快捷地對圖像的顏色進行明暗、色偏的調整和校正，也可在不同顏色進行切換以滿足圖像在不同領域如網頁設計、印刷、多媒體等方面應用。

F. 網頁如何旋轉我想盡可能讓網頁在桌面全部顯示,因此希望整個網頁能夠像圖片一樣旋轉90度,請問如何操作

代碼如下：

<!DOCTYPE html>

<html>

<head>

<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>

原圖<img src="http://www..com/img/bd_logo1.png" alt="Flowers" style="width:200px;">

90°旋轉後的圖片

</body>

</html>

代碼呈現的結果如下圖：

G. 網頁設計中怎麼實現圖片旋轉

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+

H. html5如何讓圖片3d旋轉

1、首先打開html文件編輯器，這里使用vscode新建一個html文檔，文檔中寫入基本的html結構，然後插入img標簽並插入一張圖片，給img一個class屬性：

I. 怎麼把一張普通的圖片做成3D的旋轉起來

你可以先去【繪學霸】網站找「3d建模」板塊的【免費】視頻教程-【點擊進入】完整入門到精通視頻教程列表： www.huixueba.net/web/AppWebClient/AllCourseAndResourcePage?type=1&tagid=307&zdhhr-11y04r-167351975

想要系統的學習可以考慮報一個網路直播課，推薦CGWANG的網路課。老師講得細，上完還可以回看，還有同類型錄播課可以免費學（贈送終身VIP）。

自製能力相對較弱的話，建議還是去好點的培訓機構，實力和規模在國內排名前幾的大機構，推薦行業龍頭：王氏教育。
王氏教育全國直營校區面授課程試聽【復制後面鏈接在瀏覽器也可打開】： www.huixueba.com.cn/school/3dmodel?type=2&zdhhr-11y04r-167351975

在「3d建模」領域的培訓機構里，【王氏教育】是國內的老大，且沒有加盟分校，都是總部直營的連鎖校區。跟很多其它同類型大機構不一樣的是：王氏教育每個校區都是實體面授，老師是手把手教，而且有專門的班主任從早盯到晚，爆肝式的學習模式，提升會很快，特別適合基礎差的學生。

大家可以先把【繪學霸】APP下載到自己手機，方便碎片時間學習——繪學霸APP下載： www.huixueba.com.cn/Scripts/download.html

網頁製作圖片如何旋轉

與網頁製作圖片如何旋轉相關的內容