标签归档:HTML5 3D

jQuery/CSS3 3D旋转盒子动画 可自定义封面图片

在没有CSS3之前,我们只能在网页上实现2D平面动画,但是随着CSS3技术的普及,我们可以很方便的在网页上实现一个3D立方体。今天给大家带来的便是一个基于jQuery和CSS3的3D立方体盒子,我们可以通过鼠标拖拽浏览盒子的每一个面,另外,3D盒子的面都可以自定义封面图片,你可以为每一个面选择不同的图片,并还可以自定义盒子的尺寸大小。

jquery-css3-3d-image-box

在线演示源码下载

HTML5 Canvas 3D天体运行动画

今天我们要给大家分享一款基于HTML5 Canvas的3D星球天体运行动画,这里我们在Canvas画布上绘制了一颗较大的星球,然后在大星球周围有一圈很小的陨石区域,这些陨石会围绕着星球不停地旋转,而且配合黑色的背景后带有很强烈的3D视觉效果。

html5-canvas-3d-planet

在线演示源码下载

HTML5 Canvas 房间3D模型动画 可读取麦克风和摄像头

这是一款基于HTML5 Canvas的3D房间模拟动画,房间里有电视机、沙发、书柜、灯具以及一个人物模型,这些模型都是在Canvas上绘制而成。更重要的是,这款3D动画可以利用HTML5特性读取本地麦克风和摄像头,这样就可以通过摄像头将你自己投影到电视机上,看上去挺神奇的。

html5-canvas-3d-model-camera

在线演示源码下载

HTML5/CSS3 3D图片播放器 可360度旋转图片

记得之前给大家分享过一些超炫酷基于jQuery和HTML5 的3D焦点图图片播放器,很多还是不错的,比如jQuery 3D 垂直螺旋切换焦点图动画超赞实用的jQuery立体3D焦点图插件。今天要分享的是另外一款基于HTML5和CSS3 3D图片播放器,它的特点是图片呈3D样式,而且可以通过滑杆360旋转图片,效果非常炫酷。

html5-css3-3d-rotate-image

在线演示源码下载

HTML5 Canvas 3D立方体波浪动画

之前我们分享过很多基于CSS3和HTML5 Cavans的3D立方体动画,有几款还是比较炫酷的,比如这款HTML5/CSS3 3D立方体拼图和这款CSS3 3D立方体图片墙 可拖拽360度旋转。这次我们要介绍的是一款基于HTML5 Canvas的3D立方体波浪动画,一个个小立方体组成一个立体面,立方体按一定数学规则上下浮动,形成了炫酷的波浪动画效果。

html5-canvas-3d-cube-wave

在线演示源码下载

HTML5 Canvas 2D文字与3D图像粒子转换动画

今天我们要给大家分享一款基于HTML5的3D粒子动画,该动画主要在Canvas画布上绘制粒子形的文字和3D模型,并且实现2D粒子文字与3D粒子模型之间的转换动画。在转换过程中,粒子从被打散到重新组合,动画效果非常炫酷,并且我们可以通过鼠标滚轮来缩放3D模型。

html5-canvas-2d-to-3d

在线演示源码下载

超炫酷HTML5 Canvas 3D旋转地球动画

这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画,记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画,请看这里

html5-canvas-3d-earth-rotate

在线演示源码下载

HTML5 Canvas 3D文字动画 支持鼠标滚轮缩放

之前我们已经为大家分享过很多款炫酷和实用的HTML5文字动画特效,最经典的就是这款HTML5 Canvas幻彩火焰文字特效。这次给大家带来的是另外一款基于HTML5 Canvas 3D文字动画,它的特点是按住鼠标左键拖动文字可以旋转文字,从不同角度观察文字;按住鼠标左键可以移动文字;另外滑动鼠标滚轮可以缩放文字大小。

html5-canvas-3d-text-scale

在线演示源码下载

HTML5/CSS3 3D立方体拼图 支持方向键旋转

之前我们分享过不少基于HTML5/CSS3和Canvas的3D立方体旋转动画,比如这款超绚丽CSS3多色彩发光立方体旋转动画,也有基于立方体做的菜单应用,比如超实用CSS3 3D菜单 菜单项悬浮凸出立体效果。今天我们要分享的是一款基于HTML5和CSS3的3D立方体拼图应用,一共有8个小立方体组成的3D拼图,我们可以点击立方体或者方向键完成拼图,同时我们也可以让立方体保持旋转。

html5-css3-3d-cube-puzzle

在线演示源码下载

基于HTML5 WebGL的3D星云动画特效

今天我们给大家分享一个基于HTML5 Canvas的星云动画特效,整个画面模拟了一个星系的外观,比如模拟了太阳系,有很多小行星围绕着星系中心旋转,星系中心也显得格外亮丽。这些小星点都是在Canvas上绘制而成,同时我们还可以拖拽鼠标从不同视角观看星云,非常大气。

html5-webgl-galaxy

在线演示源码下载