HTML5代碼不僅可以用于網(wǎng)頁設(shè)計，還能創(chuàng)作炫酷的三維動畫效果。下面我們來看看如何使用HTML5代碼實現(xiàn)三維動畫。

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//創(chuàng)建矩形
ctx.fillStyle = '#FF0000';
ctx.fillRect(0,0,150,75);
//創(chuàng)建圓
ctx.beginPath();
ctx.arc(250, 250, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#00FF00';
ctx.fill();
//創(chuàng)建三角形
ctx.beginPath();
ctx.moveTo(400, 400);
ctx.lineTo(450, 300);
ctx.lineTo(350, 350);
ctx.fillStyle = '#0000FF';
ctx.fill();
</script>

上面的代碼通過創(chuàng)建<canvas>元素和設(shè)置它的寬高來制作畫布。然后使用getContext()方法獲取到繪圖環(huán)境，從而進(jìn)行繪圖操作。這里分別用fillRect()、arc()和lineTo()方法來創(chuàng)建矩形、圓和三角形。

在HTML5中，<canvas>元素支持3D渲染，只需使用WebGL或Three.js這類工具庫便可創(chuàng)作出具有逼真效果的三維動畫。

下面是一個使用Three.js制作的三維場景的示例代碼：

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>

代碼中創(chuàng)建了一個Three.js的場景，包括相機(jī)、繪圖器和物體。該場景中物體為一個矩形體，不斷地繞x軸和y軸旋轉(zhuǎn)，從而形成動畫效果。最后，使用renderer.render()方法在操作系統(tǒng)上繪制出矩形體的動畫。