3d网站特效代码（3d效果图网站有哪些）

今天给各位分享3d网站特效代码的知识，其中也会对3d效果图网站有哪些进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、HTML5如何在网页中实现3D效果
• 2、在网页上比如http://www.sony.com.cn/3d/index.html上的3D（不知道是不是，就是可以滑动然后会动那个图片
• 3、如何利用CSS3制作3D效果文字具体实现样式

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="" /

 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

   p3D立方体/p

   pHTML5学堂/p

   p3D立方体/p

   p码匠/p

   pJavaScript/p

  /div              

 /div

/body

/html

代码解析

当鼠标移入的时候，立方体逐渐的发生旋转（非突变），围绕X轴旋转45度的同时，围绕Y轴旋转45度。

当鼠标移出立方体时，立方体恢复到初始状态。在最开始状态时，并没有采用无限远的视角，设置一定的视角，让刚开始时直视立方体时，不会觉得是一个平面。

3D效果制作-目标效果图

以上资料来源：《HTML5布局之路》

在网页上比如http://www.sony.com.cn/3d/index.html上的3D（不知道是不是，就是可以滑动然后会动那个图片

我浏览了这个网站，看到了那个效果。我认为，这是用代码实现的网页3D特效，并不是图片本身就是3D的.............或许我说的不对，期待大家的答案~~~

如何利用CSS3制作3D效果文字具体实现样式

复制代码代码如下: .example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}译者注：X表示x轴上的位移，可为负值；Y表示y轴上的位移，可为负值；Blur表示投影的宽度，不能为负值；Color为投影的颜色。 堆叠多层CSS投影 虽然我们没有必要堆叠多层投影，但通过堆叠多层投影会有更好的3D效果 开始创建3D文字 你可能会选择比文字更深的颜色来作为投影的颜色，所以这个例子中我就用白色的文字，用深一点的灰色作为投影颜色，这个例子中我将H2的文字渲染3D效果，css代码如下： 复制代码代码如下:h2{text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, /* end of 2 level deep grey shadow */ 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下：好了，到这里你已经创建了基本的3D文字，然而，让我们进一步来实现鼠标滑过的文字放大效果，并用css的transision属性实现圆滑的淡入淡出效果。 首先用transform属性实现滑过字体放大 复制代码代码如下:h2:hover{/* CSS3 Transform Effect */ -webkit-transform: scale(1.2); /* Safari Chrome */ -moz-transform: scale(1.2); /* Firefox */ -o-transform: scale(1.2); /* Opera */}效果如下：然后利用transition属性实现淡入淡出效果 复制代码代码如下:h2{/* CSS3 Transition Effect */ -webkit-transition: all 0.12s ease-out; /* Safari Chrome */ -moz-transition: all 0.12s ease-out; /* Firefox */ -o-transition: all 0.12s ease-out; /* Opera */}到此，我们就用CSS3实现了3D效果的文字，并且在鼠标滑过是让字体放大，且有淡入淡出的效果，这一切是用纯CSS实现的哦。

关于3d网站特效代码和3d效果图网站有哪些的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。