在網頁設計中，3D模型旋轉是非常常見的效果。它可以使網頁更加富有活力，增加用戶的視覺體驗。HTML5中提供了WebGL技術來實現3D模型渲染，但對于某些限制HTML5的平臺，我們可以使用HTML3D模型來實現。下面是一些HTML3D模型旋轉代碼。 首先，我們需要在HTML中添加一個畫布(canvas)元素，用于渲染3D模型。以下是HTML代碼：

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

接下來，我們需要引入Three.js庫來處理3D模型。以下是引入Three.js庫的代碼：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>

然后，我們可以創建一個場景(scene)和一個相機(camera)。相機定義了觀察點和投影方式，場景則包含所有3D物體。以下是創建場景和相機的代碼：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

現在，我們可以創建一個幾何體(geometry)和一個材質(material)，然后將它們組合成一個網格(mesh)。以下是創建幾何體、材質和網格的代碼：

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

最后，我們可以使用requestAnimationFrame()函數來循環執行渲染函數(render)并更新3D模型的位置和角度。以下是渲染函數和循環執行代碼：

function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("c") });
renderer.setClearColor(0xffffff, 1);
render();

以上代碼將使一個綠色的立方體在x、y軸上以0.01的速度旋轉。如果我們想在其他方向上旋轉，只需更改mesh.rotation屬性即可。 總的來說，HTML3D模型是一種快速、簡單的實現3D模型效果的方法，它可以幫助我們增強網頁的視覺效果。