网页设计立体效果图_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，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。

导航:首页 > 万维百科 > 网页设计立体效果图

网页设计立体效果图

与网页设计立体效果图相关的知识