标签归档:HTML5 3D

HTML5多立方体3D翻转动画

很久没有分享关于HTML5 3D动画的应用了,大家可以移步至HTML5 3D目录下欣赏所有的HTML5 3D动画特效。今天小编要给大家带来另外一款HTML5 3D立方体翻转动画,这款动画能实现多个立方体按一定顺序翻转,给人墙体翻转的3D视觉效果。

html5-rect-wave

在线演示源码下载

HTML5/CSS3实现图片倒影3D效果

这是一款基于HTML5的图片倒影特效,同时它主要利用了CSS3的倾斜属性,通过这样的渲染,让图片整体看上去很富有立体感,图片的倒影看上去也非常逼真,是一款比较实用的HTML5图片应用。

html5-css3-image-shadow

在线演示源码下载

HTML5 3D立方体图片切换动画

今天我们要来分享一款HTML5图片切换动画,该HTML5动画主要是将图片分成几个块,切换时每一个块都会以3D立方体的形式过度下一张图片,立方体的打散和聚合动画都非常酷,你可以在JS文件中配置图片的路径和切换的数量,相当灵活。

html5-3d-cube-image-slider

在线演示源码下载

3D版HTML5模拟衣服撕扯动画

还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗?这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本,在原来的基础上,衣服布料呈3D环形显示,你同样可以用鼠标拖拽衣服,不过和之前不同的是,鼠标左键用来拖拽衣服,鼠标右键用来切割衣服,失去了之前鼠标用力程度和衣服破碎程度的关系,似乎功能上有所缺失,但是HTML5 3D功能还是不错的。

3d-html5-cloth-tear

下面我们来简单分享一下实现的源码,代码主要由HTML和JavaScript组成,主要还是JavaScript。

HTML代码:

<canvas width="800" height="800" id="c"></canvas>

只是定义了一个canvas标签,非常简单。

JavaScript代码:

canvas = document.getElementById('c');
ctx    = canvas.getContext('2d');

//settings
var physics_acc   = 5,
    tear_distance[......]

阅读全文>>

HTML5 3D爱心动画 晚来的七夕礼物

七夕情人节刚过,今天小编却在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,莫非老外也过七夕?当然小编还是将这款HTML5 3D爱心动画收藏了起来,虽是晚来的七夕礼物,但还是可以讲这款爱心动画留到明年七夕再用嘛。大家可以点解DEMO来看看。

html5-3d-heart-animation

这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码。

HTML代码:

<div class=’heart3d’>
<div class=’rib1′></div>
<div class=’rib2′></div>
<div class=’rib3′></div>
<div class=’rib4′></div>
<div class=’rib5′></div>
<div class=’rib6′></div>
<div class=’rib7′></div>[......]

阅读全文>>

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

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

html5-svg-3d-model

在线演示源码下载

HTML5 Canvas 地球旋转3D动画

很久没有分享HTML5动画特效了,尤其是HTML5 3D动画,每一个都非常酷。今天我们要分享的是一个基于Canvas的HTML5 3D地球旋转动画,地球外观非常逼真,海面、陆地、白云都像是真的一样,另外地球还可以自己缓慢的旋转和移动,呈现出3D立体的视觉效果。

html5-canvas-3d-earth

在线演示源码下载

HTML5全屏3D图片展示特效

这是一款基于HTML5和CSS3的3D图片特效,该图片特效的功能如下:提供一个类似焦点图的HTML5图片播放器,我们可以点击按钮来切换不同的图片显示。更重要的功能是点击图片上的全屏按钮,图片即可以3D的方式全屏显示,效果非常酷。

html5-full-3d-image-show

在线演示源码下载

HTML5实现会跳舞的3D立方体动画

今天要为大家分享一款很酷的HTML5动画特效——会跳舞的3D立方体。我们将几个小立方体排成几列几行,让后每一个立方体都按照一定的规律上下跳动,形成这款HTML5跳舞的3D立方体。另外,我们可以通过对右上角面板控制立方体数目、大小等参数。

html5-3d-cube-dance

在线演示源码下载

HTML5 Canvas 3D折线图表应用

今天我们再来讨论一下关于HTML5图表应用的问题,这款HTML5图表是基于canvas的3D折线图表,图表在初始化的时候会根据数据点把折线分割成多条线段,然后线段将逐渐悬浮到数据点对应数值的位置。由于是3D的效果,所以图表的折线也和其他折线图表的不同。

html5-canvas-3d-line-chart

在线演示源码下载