导航:首页 > 万维百科 > 3d效果网页设计

3d效果网页设计

 发布时间：2021-02-18 00:58:08

1、平面，网页，3D设计师，学那个好，

3D最难学！ 但最有前途！
我学的是平面兼网页 累死了人 工资2000（长沙） 我高中同学学3D的（也有点累） 工资8000（长沙）

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和网页设计哪个的就业前景更好一点

眼光不要太局限，3D只是设计师的一个小工具。而网页设计只是一个设计师可以做的一个小方向。学东西要从博览到详细。如果没有一个好的基础的话，网页设计是学不好的。所以说，如果你不懂设计，只学3D又有什么用呢？这就好像一个士兵虽然有百步穿杨的能力，但是却还不知道自己的敌人是谁。所以，如果你想从事设计，就从基础课开始吧。色彩构成、平面构成、立体构成这些是设计师最基础的东西。一个网站我们觉得很美观，它是由原因的。网页设计师必须要掌握美的规律，掌握人类对美的构成的认识。所以说单学会一个网页设计软件是没有用的。要从广博的学习开始。

4、网页设计与3D设计

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



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


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

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

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

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


再一图，真实写照啊！

5、从网页设计转3d设计容易吗？前途如何啊！

有点夸张,现在三维的市场也接近做滥了,最重要的做好,
不过如果你想尝试的话也是可以的,不要把它想的太简单了,如果水平一般的,一样做不了三维设计师,只是技术工人而已,而且做这一行也是蛮单一的,并不像你所想的那样,尤其是建模,如果做影视后期还不一样,里面道道蛮多的,而且三维的自学并不如平面那么容易,最重要的入门,无人引导的话不太好弄.

6、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轴移动复制一个，命名为“顶”，调整其位置。

7、淘宝美工，网页设计，3D渲染要学哪款软件呢？

封面设计叫平面设计 网站设计叫网页设计 淘宝美工是集平面+网页的综合；所以要学的软件一般是 PS+DW ; AI能会最好，不会也不影响淘宝美工工作的；
以上说的只是基本知识，如果做一个好的美工，除了用心，对事物的认知美感，还有就是时间。
本人六年美工经验，越学才发现不会不懂的东西太多，呵呵。个人拙见，采纳谢谢 建议你先学photoshop cs5

与3d效果网页设计相关的知识