A-A+

5个超酷HTML5 3D动画精选

2016年06月23日 交互设计 暂无评论 阅读 1 次

1、HTML5 3D立体图片相册

HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以放大图片,相册图片都是美女,千万别让女朋友看到。

gallery

 

在线演示    源码下载

2、HTML5 SVG 3D空间模型 可拖拽缩放

这是一个基于HTML5和SVG的3D空间模型,这个3D模型提供了x、y、z三个坐标轴以及一个平面网格。我们可以对这个HTML5 3D模型进行缩放、拖拽、翻转等操作,这些操作可以通过鼠标,也可以通过快捷键,非常方便。

在线演示   源码下载

3、基于HTML5的SVG动画折线图表 线颜色渐变

这是一款基于SVG结构的HTML5的折线图。遗憾的是这款HTML5图表不可以自定义数据点,但是有一个特点是折线的颜色是渐变的,并且在图表数据初始化的时候,折线显示是带有动画特效的。

在线演示   源码下载

4、HTML5 TweenMax.js和jQuery实现的3D图片动画 可多角度旋转

TweenMax是一个很常用的动画制作框架,TweenMax.js是TweenMax的JS版本,今天我们就结合TweenMax.js和HTML5来实现一款超炫的3D图片墙动画,几张图片围成一个围墙,然后图片墙可以随着鼠标的移动而旋转,旋转速度可以根据鼠标来变化,非常酷的HTML5 3D动画应用。

在线演示   源码下载

5、HTML5 3D正方体特效 可任意面旋转定位

这款HTML5 3D立方体动画的特点是可以定位立方体的任意面,同时也可以在不同的方向上旋转。

在线演示   源码下载

本文链接:http://www.html5tricks.com/cool-html5-3d-animation-pick.html

标签:

给我留言