網頁設計立體效果圖_HTML5如何在網頁中實現3D效果

1、一般製作平面立體效果圖都用什麼軟體

https://.baidu.com/question/569467741.html
這里有答復。
-供參版考權

2、如何在網頁展示3D立體圖？

你說的是物品的3D展示？比如iCreator他們家網站上的這種？
兩種方式：
1.建模。用3DMAX/MAYA等建模，再上傳到iCreaotr模型網就可以拿到嵌入鏈接，可以嵌入到網頁直接放帶動畫的3d模型，而且自帶交互。也就是說可以滑鼠觸發反應，自己拖動模型旋轉、放大縮小，比單純的視頻/動圖只有播放暫停的選項要好很多。效果好能任意展示產品各個角度缺點是建模成本較高

2.圖片拼接。對產品進行360度或720度拍攝，然後通過flash或其他3D自動成像軟體合成出flash、gif或html5格式動畫。優點是成本低方便，缺點是只能360度或者720度，不能任意角度觀看。

3、網頁製作一定要先用photoshop製作效果圖嗎？

不一定，如果是製作簡單的表格式網頁或是有現成模板的就可以不用

【備注】

做網頁用Photoshop製作出效果圖，是為了能直觀的展現網頁，讓客戶了解網頁的排版和設計效果。

Photoshop製作效果圖能給程序員一個直觀的表達形式，不用再製作的過程中再去考慮排版和效果的展現。

4、如何實現網頁設計立體盒子效果

這是一個正在逐漸流行的創意的趨勢。事實上它非常容易實現，只需要增加了一個額外的元素和獨特的設計。讓我們看一下該如何實現立體盒子的效果吧，然後，我們將會給大家展示一些很好的例子。准備先准備好你的頁面和圖片，我們使用這張圖片：我們簡單的將HTML寫成這樣: <p id="container"> <img id="logo" src="logo.png" alt="Lee Munroe" /> </p>CSS樣式可能會是這個樣子的:body{background:#999;} #container{ width:960px; background:#fff; margin:20px auto; padding:10px; }下面是一個效果預覽：設置為相對定位當我們定位logo的時候，我們希望它的位置是相對於容器的，因此使用相對定位：#container{ width:960px; background:#fff; margin:20px auto; padding:10px; position:relative; }將它定位到盒子的外面現在你需要做的就僅僅是定位logo，將其水平定位，讓它從容器中突出出來。

5、網頁中的那些漂亮的背景，那些很有立體感的圖片和按鈕是用photoshop做出來的

《邊學邊做》系列，我們現在就用這個教材

6、HTML5如何在網頁中實現3D效果

CSS3除了為開發者提供二維變形之外，還將動畫從二維平面推動到了三維立體狀態，能夠實現真正的三維特效。

三維變形和二維變形一樣，均使用的是transform屬性。想要觸發三維變形有兩種方式：一種方式是通過語法告知瀏覽器「請採用三維方式進行變形處理」，另一種方式是直接使用CSS3三維變形的語法。

觸發方法1：告知瀏覽器變形方式

-webkit-transform-style:preserve-3d;

Tips：IE不支持三維變形，在移動端，絕大多數的瀏覽器均為WebKit內核，因此，在此句代碼之前需要書寫-webkit-的前綴內核。

Tips：不要為body元素設置-webkit- transform-style: preserve 3d,否則會對position:fixed定位的元素造成布局影響。在開發當中，如果當前元素屬於body的子級元素，又希望應用三維變形，則在body和當前元素之間多嵌套一層結構，並為這層元素應用三維變形即可。

觸發方法2：直接使用CSS3變形語法

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>言成科技/title>
    <style>
        .box1 {
            width: 150px;
            height: 150px;
            border: 2px solid blue;
        }
        .box1 div {
            height: 150px;
            background: rgba(0, 0, 0, 0.5);
            -webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg);
            transform: translate3d(30px, 60px, 20px) rotateX(30deg);
        }
    </style>
</head>
<body>
    <div class="box1">
        <div></div>
    </div>
</body>
</html>

具體三維變形的具體屬性詳見《CSS3-3D相關知識詳解—視角以及變形方向》

3D效果製作

需求

製作一個立方體，並進行旋轉

代碼實例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>言成科技</title>
<link rel="stylesheet" type="text/css" href="https://css.h5course.cn/reset-1.0.0.css" />
<style>
  .main-bac { -webkit-perspective:1500; } /*設定透視距離*/
  .main{
   width:200px;
   height:200px;
   margin: 0 auto;
   position:relative;
   -webkit-transform-style:preserve-3d;
   -webkit-transition:-webkit-transform 2s ease 0s;/*過渡時間*/
  }
  /*基本樣式*/
  .main p{
   position: absolute;
   margin: 0;
   padding: 0;
   width: 200px;
   height: 200px;
   text-align: center;
   line-height: 200px;
   font-size: 26px;
   opacity:0.5;
  }
  /*將第一個元素Z軸向前移動100px，形成第一個面（正面）*/
  .main p:nth-of-type(1) {
   background-color:red;
   -webkit-transform:translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞x軸旋轉90度形成上面的面*/
  .main p:nth-of-type(2) {
   background-color:orange;
   -webkit-transform:rotateX(90deg) translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞x軸旋轉-90度形成下邊的面*/
  .main p:nth-of-type(3) {
   background-color:yellow;
   -webkit-transform:rotateX(-90deg) translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞y軸旋轉90度形成右側的面*/
  .main p:nth-of-type(4) {
   background-color:green;
   -webkit-transform:rotateY(90deg) translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞y軸旋轉-90度形成左側的面*/
  .main p:nth-of-type(5) {
   background-color:#b435bf;
   -webkit-transform:rotateY(-90deg) translateZ(100px);
  }
  /*將第一個元素Z軸向前移動100px，繞y軸旋轉180度形成後面（背面）*/
  .main p:nth-of-type(6) {
   background-color:blue;
   -webkit-transform:rotateY(180deg) translateZ(100px);
  }
  /*滑鼠移入時繞Y軸旋轉180度，繞Z軸旋轉180度*/
  .main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg); }
</style>
</head>
<body>
<div class="main-bac">
  <div class="main">
   <p>言成科技</p>
   <p>3D立方體</p>
   <p>HTML5學堂</p>
   <p>3D立方體</p>
   <p>碼匠</p>
   <p>JavaScript</p>
  </div>
</div>
</body>
</html>

代碼解析

當滑鼠移入的時候，立方體逐漸的發生旋轉（非突變），圍繞X軸旋轉45度的同時，圍繞Y軸旋轉45度。

當滑鼠移出立方體時，立方體恢復到初始狀態。在最開始狀態時，並沒有採用無限遠的視角，設置一定的視角，讓剛開始時直視立方體時，不會覺得是一個平面。

3D效果製作-目標效果圖

以上資料來源：《HTML5布局之路》

7、3D裝修效果圖的網頁怎麼製作

1、製作客廳的基本框架，設置系統單位為「毫米」。
2、頂：繪制一個矩形（長度：5040，寬度：8906），添加「編輯樣條線」修改器，進入「分段」級別，刪除右側的線段，進入「樣條線」級別，設置「輪廓」為240。添加「擠出」命令，數量為2800，命名為「牆體」。
3、頂：創建一個長方體（長度：3540，寬度：900，高度：2800），調整其位置。
4、選擇「牆體」，單擊「復合對象」面板中的「布爾」按鈕，拾取剛創建的長方體進行「差集」運算。
5、為「牆體」添加「編輯網格」命令，進入「多邊形」級別，選擇一側的多邊形，設置ID為2，選擇「編輯/反選」命令，將其餘多邊形的ID設置為1。
6、頂：創建一個長方體（長度：5034，寬度：8926，高度：0），命名為「地面」，調整其位置。
7、選擇「地面」，按Ctrl+V原位置復制一個，命名為「地線」（長度分段：7，寬度分段：11）。添加「晶格」命令（勾選「僅來自邊的支柱」，半徑：1.5）。
8、前：選擇「地面」，沿Y軸移動復制一個，命名為「頂」，調整其位置。

8、一般製作平面立體效果圖都用什麼軟體？

1、AutoCAD

AutoCAD用於二維繪圖、詳細繪制、設計文檔和基本三維設計。

基本特點：

具有完善的圖形繪制功能。

有強大的圖形編輯功能。

可以採用多種方式進行二次開發或用戶定製。

可以進行多種圖形格式的轉換，具有較強的數據交換能力。

支持多種硬體設備。

支持多種操作平台

2、3DSMAX

可以更加真實的表現實際物體三維立體效果

突出特點

1、基於PC系統的低配置要求；

2、安裝插件（plugins）可提供3D Studio Max所沒有的功能（比如說3DS Max 6版本以前不提供毛發功能）以及增強原本的功能；

3、強大的角色(Character)動畫製作能力；

4、可堆疊的建模步驟，使製作模型有非常大的彈性。

3、Photoshop

Photoshop主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。

如果客戶對效果要求不是很高，Photoshop也可以做效果圖，但需要較好的透視感，而且Photoshop效率比3dsmax要高，價格也容易成交

4、Combustion

Combustion 是三維視頻特效軟體，包含矢量繪畫、粒子、視頻效果處理、軌跡動畫以及3D效果合成等工具模塊。

Combustion將原有的基於矢量的繪畫、動畫系統paint和特技效果製作系統effect*合並在一起，並集取了Discreet獲獎系統inferno的製作特性和極快的緩存體系結構，開發出的一個在桌面系統中創作視覺特技效果的互動式的新環境。

5、After Effects

After Effects，適用於從事設計和視頻特技的機構，包括電視台、動畫製作公司、個人後期製作工作室以及多媒體工作室。

導航:首頁 > 萬維百科 > 網頁設計立體效果圖

網頁設計立體效果圖

與網頁設計立體效果圖相關的知識