HTML5大显神通：8个3D视觉效果“让你好看”

在的网页中应用了越来越多的3D应用，特别是基于HTML5 Canvas的动画特效，让用户有一种非常震撼的视觉体验。本文收集了8个非常炫酷的3D视觉效果的HTML5动画，都有源代码分享，你可以学习你感兴趣的HTML5动画，一起来看看。

1、CSS3飘带状3D菜单

菜单带小图标这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。

2、HTML5/CSS3 3D纸片折叠动画

今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效，尽管它目前很少能在项目中应用，但从源码中我们可以学到很多HTML5 3D动画的制作知识。这是一款纸片折叠动画特效，利用HTML5和CSS3的相关特性，我们可以将一张张纸片折叠起来，形成很酷的3D动画效果。

3、HTML5 webkit 3D立方体图片旋转滑块应用

今天再来分享一款HTML5 3D立方体动画，这个只是一个3D效果模型，你可以用图片替换演示中的立方体4个面，这样就可以将这款HTML5立方体旋转动画改造成HTML5 3D焦点图了，由于是基于webkit的，所以有浏览器限制，Google Chrome最佳。

4、HTML5颜色渐变3D文字特效

之前我们已经分享过不少HTML5文字特效，效果都还不错，尤其是这款HTML5摆动的文字特效类似柳枝摆动，更是有非常酷的文字动画效果。今天我们要分享一款HTML5 3D文字特效，文字的颜色是渐变的，同时有文字阴影，更加凸显了3D立体的效果。

5、HTML5 3D图片阴影翻转动画

今天我们要分享一款很酷的HTML5 3D动画特效，这款3D特效可以为你的图片增加阴影的效果，而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和之前分享的HTML5 3D动画HTML5 3D正方体旋转动画有着类似的效果，大家也可以看看。

6、纯CSS3 3D按钮按钮酷似牛奶般剔透

CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。

7、CSS3 3D发光切换按钮

刚刚我们发布过一款CSS3开关切换滑动按钮，应该说出了有点3D立体的效果外，其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮，它不仅具有3D的效果，而且可以发光，当开关处于打开状态时，旁边的小灯就会亮起来，然后灯光投射到开关上，效果挺逼真的。

8、CSS3 3D弹性按钮

今天要分享的这款CSS3按钮和这款按钮差不错，也同样拥有3D的效果，按钮在按下时带有弹性质感。

微信搜索“IT之家”关注抢6s大礼！下载IT之家客户端（戳这里）也可参与评论抽楼层大奖！

京四度科技有限公司成立于2010年12月，是一家在互联网高端软件领域专业从事网页3D引擎的研发，以及3D虚拟现实网页作品设计的高新技术企业。

国内最大的3D网站研发企业，国内技术实力最强的WebGL团队；国内最早从事WebGL3D网站研发的企业。网页虚拟现实技术研发、网页三维引擎研发、布料物理动力学引擎研发、物理力学引擎研发、空气动力学引擎研发、3D模型JSON编码技术研发等。

我们是国内最专业的3D网站开发企业，一种全新的网站将带给您无与伦比的非凡体验，它将带您走进一个看似虚拟但却真实的梦幻世界!

从2012年起业务已延伸到多媒体展馆展厅设计、3D动画、工业3D交互展示、3D虚拟交互展示、互动多媒体应用、3D数字沙盘系统、3D网上展馆设计、产品3D交互漫游系统、VR虚拟现实、AR增强现实应用等方面，为政府、企业、房地产提供一站式数字交互服务。

我们是国内率先利用 HTML5+WebGL 技术为国内企事业单位提供增值互联网+服务的服务商，也是国内最主要的WebGL开发服务商，我们开创了国内WebVR应用的先河，我们的作品将颠覆人们对传统网站的认识，一种全新的网站将带给您无与伦比的非凡体验，它将带您走进一个看似虚拟但却真实的立体世界。

行业技术3D展示应用：

1、3D虚拟商城

虚拟3D商城是互联网技术飞速发展的产物，它超越了现有网络商务平台，实现了前所未有的电子商务“人机一体”和身临其境的三维立体效果。我们为您提供一个高度互动的3D虚拟现实环境，一种足不出户便如同亲临购物中心的全新体验。

- 虚拟现实漫游

- 集成O2O电商管理

- 集成在线支付

- 交互互动操作

- 沉浸式购物体验

-VR购物系统体验

2、可视化DIY

独特的在线3D可视化定制模式 — 让网友拥有与众不同的购物体验，我们认为：每个人都是生活的设计师。模块化的组合可以形成上千种的样式，客户可以根据自己的风格定制属于自己的特定商品。

-物体拖移组合

-交换部件材质颜色

-交换部件大小、形状、结构

-模型拆解组装拼接

-交换部件位置、旋转方位

3、产品3D展示

产品3D模型展示以其便捷性、互动体验、直观性三大特点向人们充分展示了一个奇妙的精彩视界：消费者可通过互联网，用电脑操作产品，或360°旋转及查看产品内部结构分解，精彩纷呈的视觉效果，让消费者自由畅享互动的乐趣。

- 集成CMS内容管理

- 三维产品在线展示

- 用户自主上传产品模型

- 用户自主管理模型库

- 鼠标交互互动操作

4、三维虚拟仿真

我们为景区、楼盘、院馆、游戏等在互联网上构建一个三维场景，网友在其中穿行，足不出户就能感受到华丽的篇章。场景和控制者之间能产生交互，加之高质量的画面实时渲染使人产生身临其境的感觉，它将带您走进一个看似虚拟但却真实的奇异世界。

- 景区旅游在线仿真展示

- 房地产楼盘在线仿真展示

- 汽车模拟驾驶仿真

- 3D立体眼镜仿真（红蓝眼镜、左右眼镜、偏振眼镜）

- 工业设备自动化在线仿真展示

5、创意设计

我们擅长基于互联网浏览器的交互式动画、特效表现、视觉设计、程序设计。此项技术在3D网站的应用，使3D网站在表现上更加绚丽多彩，增强前所未有的视觉感染力，它不同与影视特效，因为完全由程序实现，所有我们可以用鼠标或键盘控制动画场景中画面的视角、节奏、动画。

- 网页3D游戏

- 影视动画视频特效

- 虚拟网页场景构建

- 3D文字创意

- 粒子动画创意

- 物品几何创意

- 光影、云雾、景深等视觉创意

6、数字展馆

3D数字展馆是指利用数字化手段，实现藏品保存，陈列展示，科学研究和社会教育等功能，构筑虚拟世界的展览馆；对于普遍意义上的数字展览馆来说，是指利用数字技术，对文物（包括可移动文物和不可移动文物）信息进行全方位和多形式采集，标准化存储和加工，并通过网络连接和一系列相关规定，协议，实现文物信息的资源共享，有效利用和科学管理。

- 3D网络数字展览馆

-3D网上博物馆

-3D网上美术馆

-3D园区虚拟漫游

一、项目背景】

随着HTML5 CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。

【二、项目分析】

想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。

因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的，因此要赋予每个面不一样的值，即不一样的位置它才能展现出来。

【三、需要的工具】

Adobe Dreamweaver

【四、项目目标】

实现3的l立方体旋转，鼠标移上去实现缩放效果。

【五、项目实现】

1、打开Adobe Dreamweaver，新建html文档。把标题改为“3d立方体”。

2、在body标签，创建一个div盒子，给它class属性，在外层div里面在创建6个div表示立方体的六个面，同样给它们 class属性。

<body>
    <div class="box">
      <div class="box2">
        <div class="box-2">top</div>
        <div class="box-2">btm</div>
        <div class="box-2">left</div>
        <div class="box-2">right</div>
        <div class="box-2">face</div>
        <div class="box-2">back</div>
      </div>
    </div>
</body>

3、创建CSS样式

<style type="text/css">
.box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transition: all 2s;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-15deg);
}
.box:hover {
  transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);
}
.box .box-2 {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 1.2em;
  position: absolute;
  top: 0;
  left: 0;
}
.box .box-2:nth-child(1) {
  /*小立方体第一面*/
  background: rgba(225,0,0,0.5);
  transform: rotateX(90deg) translateZ(50px); #角度 偏移量
}
.box .box-2:nth-child(2) {
    /*小立方体第二面*/
  background: rgba(255,255,0,0.5);
  transform: rotateX(-90deg) translateZ(50px);
}
.box .box-2:nth-child(3) {
    /*小立方体第三面*/
  background: rgba(225,0,255,0.5);
  transform: rotateY(-90deg) translateZ(50px);
}
.box .box-2:nth-child(4) {
     /*小立方体第四面*/
  background: rgba(0,255,0,0.5);
  transform: rotateY(90deg) translateZ(50px);
}
.box .box-2:nth-child(5) {
     /*小立方体第五面*/
  background: rgba(225,0,0,0.5);
  transform: translateZ(50px);
}
.box .box-2:nth-child(6) {
    /*小立方体第六面*/
  background: rgba(0,0,255,0.5);
  transform: rotateY(180deg) translateZ(50px);
}
</style>
  </head>
  <body>
    <div class="box">
      <div class="box2">
        <div class="box-2">top</div>
        <div class="box-2">btm</div>
        <div class="box-2">left</div>
        <div class="box-2">right</div>
        <div class="box-2">face</div>
        <div class="box-2">back</div>
      </div>
    </div>
</body>
</html>

方法说明：

rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

rotateZ() 旋转

通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转。

下表是部分属性所代表的含义：

4、运行一下看下效果；点击F12运行。

5、呈现的效果如下图所示。

可以看到效果基本上可以，可是鼠标移上去没有效果。

6、添加鼠标移上去缩放的效果

.box:hover{
    transform: rotateX(300deg) rotateZ(300deg) rotateY(-300deg) scale(0.5);

  } # scale是缩放倍数

7、外层再添加一个3d立方体形成叠加效果

body代码：

<div class="box">
<div class="box-1">top</div>
<div class="box-1">btm</div>
<div class="box-1">left</div>
<div class="box-1">right</div>
<div class="box-1">face</div>
<div class="box-1">back</div>
</div>

CSS样式代码

<style type="text/css">
.box .box-1{
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 2em;
    position: absolute;
    top: 0;
    left: 0;
  }
  .box .box-1:nth-child(1){
    /*大立方体第一面*/
    background: rgba(225,0,0,0.5);
    transform:rotateX(90deg) translateZ(100px);

  }.box .box-1:nth-child(2){
         /*大立方体第二面*/
    background: rgba(255,255,0,0.5);
    transform:rotateX(-90deg) translateZ(100px);

  }.box .box-1:nth-child(3){
        /*大立方体第三面*/
    background: rgba(225,0,255,0.5);
    transform:rotateY(-90deg) translateZ(100px);
  }.box .box-1:nth-child(4){
         /*大立方体第四面*/
    background: rgba(0,255,0,0.5);
    transform:rotateY(90deg) translateZ(100px);

  }.box .box-1:nth-child(5){
        /*大立方体第五面*/
    background: rgba(225,0,0,0.5);
      transform:translateZ(100px);
  }.box .box-1:nth-child(6){
        /*大立方体第六面*/
    background: rgba(0,0,255,0.5);
    transform:rotateY(180deg) translateZ(100px);
  }
</style>

【六、效果展示】

1、点击运行，效果如下图所示。

2、鼠标移到立方体上，缩放效果展示，如下图所示。

【七、总结】

1、整个效果写出来，还是比较简单的，只要明白各个命令的意思，剩下的就是组织一下逻辑而已。

2、欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

3、CSS样式的效果不止这些，还有更加炫酷的效果，值得大家去学习。

4、实现的方法3d立方体的方法有很多，但这是最简单的一种。

5、如果需要本文源码，请在公众号后台回复“立方体”四个字获取。

看完本文有收获？请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

在线咨询

上一篇：精选13个HTML5学习必备网站
下一篇：这 12 个实用的 HTML标签（组件）建议尽早用上

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商