标签归档:HTML5 3D

HTML5立体圆环旋转动画 HTML5 3D效果

HTML5 3D动画效果非常多,我们在html5tricks上也分享过一些,比如3D HTML5 Logo动画,旋转效果非常逼真。今天我们来看一款基于HTML5的立体圆环旋转动画,该特效主要利用了CSS3的-webkit-transform-style属性,效果非常酷。

html5-3d-circle-rotate

在线演示源码下载

HTML5 3D衣服摆动特效 超酷HTML5 3D动画

前面我们介绍过很多HTML5 3D动画特效,最经典的要算HTML5 WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5 3D衣服摆动动画特效,动画也是在HTML5 Canvas上完成,它模拟衣服晾在绳子上,点击鼠标可以让衣服摆动起来,就行风吹动它一样,非常逼真炫酷。

html5-3d-cloth

在线演示源码下载

HTML5 3D书本翻页特效 3D效果比较漂亮

利用HTML5和CSS3实现3D效果真的非常方便,下面这款书本翻页特效就很好地利用了HTML5的3D特性。鼠标拖拽书本页面即可翻动页面,在翻页的过程中整本书还呈现出3D立体的效果,包括书本中的图片也十分立体。

html5-3d-book

在线演示源码下载

3D HTML5 Logo动画 HTML5多视角3D旋转动画

HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转的效果。

3d-html5-logo-animation

在线演示源码下载

HTML5 WebGL水面水波荡漾特效 可多视角展示 超逼真

之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大石头,在水面上点击即可泛起水波,加上模拟光的照射,水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动,也可以拖动画面多视角观看该HTML5水波动画。

html5-webgl-water-effect

在线演示源码下载

HTML5 3D Google搜索 小盒子 大世界

HTML5真是能让人想象万千,居然动起了Google搜索的主意,它利用HTML5技术将Google搜索放到了一个小盒子里,弄起了3D搜索。随着鼠标移动,HTML5 3D搜索盒子也就转动,非常立体。点击搜索按钮,即可打开盒子进行Google搜索。

html5-3d-google-search

在线演示源码下载

HTML5 3D立体图片旋转播放展示

自从HTML5技术的出现,我们可以在浏览器上看到越来越多的3D特效。这款HTML5 3D立体图片旋转播放展示工具就体现了强大的HTML5 3D功能。当然这需要支持HTML5 3D功能的浏览器才能观看这个3D图片演示。

html5-3d-image-player

在线演示源码下载