这是一款基于HTML5和CSS3的3D动画特效，与之前的3D特效不同的是，这款是完全用HTML5特性实现的，而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转，从而可以从多个视角来观察HTML5 Logo。
在线演示 源码下载
HTML代码
XML/HTML Code复制内容到剪贴板
<div class="link-overlay">
</div>
<canvas id="canvas" style="background-color:#ddd"></canvas>
JavaScript代码
JavaScript Code复制内容到剪贴板
// bind to window onload handler
window.addEventListener(‘load’, onloadHandler, false);
/**
* Window onload handler
*/
function onloadHandler()
{
var canvas = document.getElementById(‘canvas’);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var k3dmain = new K3D.Controller(canvas, true);
// generate 3D objects
var obj1 = new K3D.K3DObject();
with (obj1)
{
drawmode = "solid";
shademode = "lightsource";
sortmode = "unsorted";
addphi = -0.5;
abouty = -90;
perslevel = 1000;
init(
[{x:-80,y:180,z:0},{x:0,y:180,z:-80},{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:-50,y:150,z:-30},{x:0,y:150,z:-80},{x:0,y:130,z:-80},{x:-30,y:130,z:-50},{x:-28,y:110,z:-52},{x:0,y:110,z:-80},{x:0,y:90,z:-80},{x:-45,y:90,z:-35},{x:-44,y:80,z:-36},{x:-25,y:80,z:-55},{x:-22,y:66,z:-58},{x:0,y:60,z:-80},{x:0,y:40,z:-80},{x:-40,y:50,z:-40}],
[],
[{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[235,235,235],vertices:[4,5,6,7,8,9,10,11,4]},{color:[235,235,235],vertices:[12,13,14,15,16,17,12]}]
