photoshop3d立体网页设计教程_HTML5如何在网页中实现3D效果

1、3D网页地图制作

很简单，使用google地图api就可以了，不用自己开发那么强大的底层程序了。。。数据也齐全、、、
http://code.google.com/intl/zh-CN/apis/maps/index.html?utm_campaign=zh_CN&utm_medium=ha&utm_source=zh_CN-ha-apac-cn-sk-api&utm_term=%E5%9C%B0%E5%9B%BE%20api

没有3D的，但是有卫星视图。那样不是比3D更真实么

除非你需要做视角转换的

2、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布局之路》

3、在网页上制作一个基于3d max的虚拟校园

看你说这个，我想你没有弄明白虚拟校园的制作流程，因为你用3DMAX和UNITY做对比，一看这一点就知道你没弄明白3DMAX和UNITY之间的关系。
流程有很多种，大致一般是这样：
1 使用3DMAX制作校园的各个楼房，道路，景观的模型并给与贴图
2 在3DMAX中制作灯光并且烘焙（这一步并不是必须的）
3 导出到交互软件中制作交互效果，你所说的第一视角参观就是一种交互效果
第一步和第二步都在3DMAX中制作完成（MAYA也是可以的），第三步要用到交互软件，而unity就是交互软件中的一种，此外还有其他交互软件，例如VRP，VIRTOOLS等等。所以如果你要制作虚拟校园，那么你既要3DMAX，又要用unity。
他们的关系可以这样理解
3DMAX(MAYA) + UNITY(QUEST3D或者VIRTOOLS或者VRP) = 虚拟校园
所以你只能拿3DMAX和MAYA做对比，拿UNITY和QUEST3D，VIRTOOLS或者VRP做对比。因为他们是同类软件，只有功能相同的同类软件才能做比较。

4、网页设计与3D设计

网页设计先学软件dreamweaver，还有DIV+CSS，PS是必须的。网页是一条走不完的路有的你学，建设3D吧。

如果你坚持网页，请看下面，程序哥伤不起！

央视新闻【技术解读：IT男改行卖水果为何会变帅】PHP工程师徐佳改行卖水果后，眼镜摘了，人变白了，连头发都长出来了……为什么？

①熬夜致皮肤受损，易提前老化；

②久坐不动易致气血不运行，肌肉松弛；

③电脑屏幕上会吸附很多粉尘和污物，长期使用会使皮肤毛孔堵塞，近视加重。快告诉常守着电脑的Ta！

再一图，真实写照啊！

5、3D MAX做的动画或3D图片如何用Dreamweaver制作到网页上

先把3d动画导出为视频格式。再用插件active x
-----------
你可以用dreamweaver中的插入ActiveX插件功能播放.wmv、.avi、.mpg等格式的视频。方法：
1。常用面板中插入一个ActiveX插件，并调整大小
2。选中ActiveX插件，在属性面板中的classid中输入如下代码（注意大小写！一个也不能错！）
CLSID:22D6f312-b0f6-11d0-94ab-0080c74c7e95

3.单击“参数“在参数项下填写：filename(原样输入)，在值项下输入文件名，如：movie.wmv（此视频存放在根木录下)

6、我会3D动画、flash动画交互（AS编程）、平面设计（ps、ai、cdr）、网页制作（dreamweaver）谁能给个建议？

建议你做动画特效copy师，前途无量。
你会3D动画，有会FLASH，AS编程，并且会平面设计，说明你有点美工基础。
个人觉得非常适合做动画特效。或者视频特效。其实个人觉得这2个都差不多。
PS,AI,CDR制作素材，然后通过AE,或者FASLH实现效果。而且你MAYA也会，那么做3D动画应该也没问题了。
没进专业公司做过，没关系。关键在于你对自己是否有信心，如果你自己有作品，那么就可以了。
动画特效或者视频特效基本功你应该都掌握了，最后只要自己有创意，那么就OK了。
如果你对自己技术有信心，可以加我，466354008（如果加我，请注明下：）），可以私下交流心得。我擅长的是开发B/S架构（跟你不是同一个方向，不过我对你掌握的这些也掌握一些）。大家可以交换心得。。。

7、在网页设计中怎样用webgl制作3d图像?

可以使用wpf +3dsmax+obj文件，后台为C#语言，三维编程。可以使用xna++3dsmax+fbx文件，后台为C#语言，三维编程。

8、我是大三的学生，学过ps、3d、flash、网页制作、ae、pp的软件，怎样将这些软件有效的结合在一起？？？

其实软件只是种来工具，贵精不贵自多
建议你要熟练掌握两种软件就行了
这根你的职业规划有关
比如你要做平面设计，会ps、dw就行
做影视后期制作的话会ae，pr，能用一点点3d软件就行了
要从事3d制作行业的话，把3d学精就行，等等
如果你没有就业的话，就给自己制定一个方向，然后再选择性的组合这些软件
会比较好以后工作的话会得心应手

9、3D MAYA 3DMAX C++和网页制作（认真学）自学要学多久啊？

3d maya 你是要去做动画 c++ 网页制作你是要做iT
虽然说3d maya功能很相近当做室内设计的都用3d 做动漫的绝大多数用maya 《秦时明月》是个特例用3d
其他动漫电影大片大部分都用maya 个别镜头会用3d等软件处理
maya有建模动画绑定动力学灯光材质渲染等模块，开始学的话除了绑定、动力学，其他的都要有了解，其中建模是基础，你的第一份工作很可能让你成天建模，其他的不需要你管。
仅建模命令，零基础，一个小时就可以教会你。重要的是练习，想画画一样，日积月累，1—2个月吧。自学永远成不了行家，你到公司几天的时间很可能比你几个月会的还多，自学只是为了能进公司，真正的学习在公司里。
其他模块，2-3月，看教程，能学个基础。
3d学习相对maya简单一点点。但建议你还是学maya

C++最好找个补习班，培训机构对考计算机证书的（多少大学生）开设，有C++基础、冲刺班。
自学3、4个月还不如使劲儿跟着老师学1个月。要是自学就多下些视频教程、买本好书使劲儿啃，C++其实不难，它是工具。
网页制作，如果你有计算机基础的话，很好学的。慢慢找本好教程，一步一步教的，多记住几个案例。如果你够聪明的话，1—2个月自学就可以做出效果有模有样的网页了。

纯手打，望采纳！

关于maya学完找什么工作：
maya 学完，你基本就是去做3D动画了，岗位是建模、加动画、材质的话你还得学PS、动画特效。
电影特效是用到maya，但还需要其他功能强大的特效软件。
游戏建模，10家公司中都不会有一家用maya的，都是3Dmax。
室内设计园林都是用3Dmax，不会用maya 的

C++学完，基本就是去公司编程，做个码奴。也可以编程当做基础，去做网络维护（基本白学）。

导航:首页 > 万维百科 > photoshop3d立体网页设计教程

photoshop3d立体网页设计教程

与photoshop3d立体网页设计教程相关的知识