search
HomeWeb Front-endH5 TutorialHTML5 transform three-dimensional cube achieves 360-degree three-dimensional rotation effect without dead ends_html5 tutorial skills

In order to better grasp the essence of transform, we decided to complete a three-dimensional cube model, which can achieve a 360-degree three-dimensional rotation effect without dead ends.

However, it is difficult to determine the view order of each face when rotating, and it is not yet perfectly solved. I hope someone can answer it!

The source code is contributed directly:

Copy the code
The code is as follows:


<script> <br />/**<br />* This version has the following problems: <br />* There is a problem with the zIndex calculation of three-dimensional rotation <br />* It also lacks a variety of models, common ones include: lines, surfaces, cones, spheres, ellipsoids, etc. <br />*/ <br />function cuboidModel(left_init,top_init,long_init,width_init,height_init) <br />{ <br />// //////////////////////////////////////// <br />//Initialize private variables<br />/ //////////////////////////////////////// <br />//Initialize the cuboid position and size<br />var left = left_init; <br />var top = top_init; <br />var long = long_init; <br />var width = width_init; <br />var height = height_init; <br />//Initialize the transformation angle, the default is 0 <br />var rotateX = 0; <br />var rotateY = 0; <br />var rotateZ = 0; <br />var zIndex = 0; <br />//Div object that defines the six sides of the cuboid <br />var div_front ; <br />var div_behind; <br />var div_left; <br />var div_right; <br />var div_top; <br />var div_bottom; <br /><br />///////////// //////////////////////////// <br />//Initialize cuboid<br />///////////// //////////////////////////// <br />//Construct six faces based on the initial position. <br />this.init = function() { <br />//Create front div <br />div_front = document.createElement("div"); <br />div_front.className = "cuboid_side_div"; <br />div_front.innerHTML = "div front"; <br />div_front.style.backgroundColor="#f1b2b2"; <br />document.body.appendChild(div_front); <br />//Create behind div <br />div_behind = document.createElement(" div"); <br />div_behind.className = "cuboid_side_div"; <br />div_behind.innerHTML = "div behind"; <br />div_behind.style.backgroundColor="#bd91eb"; <br />document.body.appendChild( div_behind); <br />//Create left div <br />div_left = document.createElement("div"); <br />div_left.className = "cuboid_side_div"; <br />div_left.innerHTML = "div left"; <br />div_left.style.backgroundColor="#64a3c3"; <br />document.body.appendChild(div_left); <br />//Create right div <br />div_right = document.createElement("div"); <br />div_right .className = "cuboid_side_div"; <br />div_right.innerHTML = "div right"; <br />div_right.style.backgroundColor="#78e797"; <br />document.body.appendChild(div_right); <br />// Create top div <br />div_top = document.createElement("div"); <br />div_top.className = "cuboid_side_div"; <br />div_top.innerHTML = "div top"; <br />div_top.style.backgroundColor=" #e7db78"; <br />document.body.appendChild(div_top); <br />//Create bottom div <br />div_bottom = document.createElement("div"); <br />div_bottom.className = "cuboid_side_div"; <br />div_bottom.innerHTML = "div bottom"; <br />div_bottom.style.backgroundColor="#e79c78"; <br />document.body.appendChild(div_bottom); <br />this.refresh(); <br />} ; <br />//Redraw<br />this.refresh = function() <br />{ <br />//Define div_front style <br />div_front.style.left = left "px"; <br />div_front.style .top = top "px"; <br />div_front.style.width = long "px"; <br />div_front.style.height = height "px"; <br />div_front.style.webkitTransformOrigin = "50% 50% " ((-1)*width / 2) "px"; <br />//Define div_behind style<br />div_behind.style.left = left "px"; <br />div_behind.style.top = top "px" ; <br />div_behind.style.width = div_front.style.width; <br />div_behind.style.height = div_front.style.height; <br />div_behind.style.webkitTransformOrigin = "50% 50% " ((-1 )*width / 2) "px"; <br />//Define div_left style <br />div_left.style.left = left ((long - height) / 2) "px"; <br />div_left.style.top = top ((height - width) / 2) "px"; <br />div_left.style.width = height "px"; <br />div_left.style.height = width "px"; <br />div_left.style.webkitTransformOrigin = "50% 50% " ((-1) * long /2 ) "px"; <br />//Define div_right style<br />div_right.style.left = div_left.style.left; <br />div_right.style .top = div_left.style.top; <br />div_right.style.width = div_left.style.width; <br />div_right.style.height = div_left.style.height; <br />div_right.style.webkitTransformOrigin = "50 % 50% " ((-1) * long /2 ) "px"; <br />//Define div_top style<br />div_top.style.left = left "px"; <br />div_top.style.top = top ((height - width)/ 2) "px"; <br />div_top.style.width = long "px"; <br />div_top.style.height = width "px"; <br />div_top.style.webkitTransformOrigin = "50% 50% " ((-1) * height /2 ) "px"; <br />//Define div_bottom style <br />div_bottom.style.left = div_top.style.left; <br />div_bottom.style. top = div_top.style.top; <br />div_bottom.style.width = div_top.style.width; <br />div_bottom.style.height = div_top.style.height; <br />div_bottom.style.webkitTransformOrigin = "50% 50% " ((-1) * height /2 ) "px"; <br />this.rotate(rotateX,rotateY,rotateZ); <br />}; <br />//Rotate the cube<br />this.rotate = function(x,y,z) { <br />rotateX = x; <br />rotateY = y; <br />rotateZ = z; <br />var rotateX_front = rotateX; <br />var rotateY_front = rotateY; <br />var rotateZ_front = rotateZ; <br />//判断各个面旋转角度 <br />var rotateX_behind = rotateX_front 180; <br />var rotateY_behind = rotateY_front * (-1); <br />var rotateZ_behind = rotateZ_front * (-1); <br />var rotateX_top = rotateX_front 90; <br />var rotateY_top = rotateZ_front; <br />var rotateZ_top = rotateY_front * (-1); <br />var rotateX_bottom = rotateX_front-90; <br />var rotateY_bottom = rotateZ_front * (-1); <br />var rotateZ_bottom = rotateY_front; <br />var rotateX_left = rotateX_front 90; <br />var rotateY_left = rotateZ_front - 90; <br />var rotateZ_left = rotateY_front * (-1); <br />var rotateX_right = rotateX_front 90; <br />var rotateY_right = rotateZ_front 90; <br />var rotateZ_right = rotateY_front * (-1); <br />//判断各个面的z轴显示顺序 <br />var zIndex_front_default = -1; <br />var zIndex_behind_default = -6; <br />var zIndex_top_default = -5; <br />var zIndex_bottom_default = -2; <br />var zIndex_left_default = -4; <br />var zIndex_right_default = -3; <br />var xI = (rotateX_front / 90) % 4; <br />var yI = (rotateY_front / 90) % 4; <br />var zI = (rotateZ_front / 90) % 4; <br />var zIndex_matrix = new Array(); <br />for(var i = 0; i < 3;i ) { <br />zIndex_matrix.push(new Array()); <br />} <br />zIndex_matrix = [["","zIndex_top",""], <br />["zIndex_left","zIndex_front","zIndex_right"], <br />["","zIndex_bottom",""]]; <br />var zIndex_matrix_behind = "zIndex_behind"; <br />//计算zIndex <br />if((xI >= 0 && xI < 1) ||(xI >= -4 && xI < -3)) { <br />} else if((xI >= 1 && xI < 2) ||(xI >= -3 && xI < -2)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix_tmp; <br />} else if((xI >= 2 && xI < 3) ||(xI >= -2 && xI < -1)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix_tmp; <br />zIndex_matrix_tmp = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix_tmp; <br />} else if((xI >= 3 && xI < 4) ||(xI >= -1 && xI < 0)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix_tmp; <br />} <br />if((yI > 0 && yI <= 1) ||(yI > -4 && yI <= -3)) { <br />var zIndex_matrix_tmp = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix_tmp; <br />} else if((yI > 1 && yI <= 2) ||(yI > -3 && yI <= -2)) { <br />var zIndex_matrix_tmp = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_tmp; <br />zIndex_matrix_tmp = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix_tmp; <br />} else if((yI > 2 && yI <= 3) ||(yI > -2 && yI <= -1)) { <br />var zIndex_matrix_tmp = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix_tmp; <br />} else if((yI > 3 && yI <= 4) ||(yI > -1 && yI <= 0)) { <br />} <br /><br />if((zI > 0 && zI <= 1) ||(zI > -4 && zI <= -3)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_tmp; <br />} else if((zI > 1 && zI <= 2) ||(zI > -3 && zI <= -2)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix_tmp; <br />zIndex_matrix_tmp = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_tmp; <br />} else if((zI > 2 && zI <= 3) ||(zI > -2 && zI <= -1)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix_tmp; <br />} else if((zI > 3 && zI <= 4) ||(zI > -1 && zI <= 0)) { <br />} <br />//赋值zIndex <br />eval(zIndex_matrix[0][1] "=" zIndex_top_default); <br />eval(zIndex_matrix[1][0] "=" zIndex_left_default); <br />eval(zIndex_matrix[1][1] "=" zIndex_front_default); <br />eval(zIndex_matrix[1][2] "=" zIndex_right_default); <br />eval(zIndex_matrix[2][1] "=" zIndex_bottom_default); <br />eval(zIndex_matrix_behind "=" zIndex_behind_default); <br />//front <br />var transform_rotate_front = "perspective(500px) rotateX(" rotateX_front <br />"deg) rotateY(" rotateY_front <br />"deg) rotateZ(" rotateZ_front "deg)"; <br />div_front.style.webkitTransform = transform_rotate_front; <br />div_front.style.zIndex = zIndex_front; <br />//behind <br />var transform_rotate_behind = "perspective(500px) rotateX(" rotateX_behind <br />"deg) rotateY(" rotateY_behind <br />"deg) rotateZ(" rotateZ_behind "deg)"; <br />div_behind.style.webkitTransform = transform_rotate_behind; <br />div_behind.style.zIndex = zIndex_behind; <br />//left <br />var transform_rotate_left = "perspective(500px) rotateX(" rotateX_left <br />"deg) rotateZ(" rotateZ_left <br />"deg) rotateY(" rotateY_left "deg)"; <br />div_left.style.webkitTransform = transform_rotate_left; <br />div_left.style.zIndex = zIndex_left; <br />//right <br />var transform_rotate_right = "perspective(500px) rotateX(" rotateX_right <br />"deg) rotateZ(" rotateZ_right <br />"deg) rotateY(" rotateY_right "deg)"; <br />div_right.style.webkitTransform = transform_rotate_right; <br />div_right.style.zIndex = zIndex_right; <br />//top <br />var transform_rotate_top = "perspective(500px) rotateX(" rotateX_top <br />"deg) rotateZ(" rotateZ_top <br />"deg) rotateY(" rotateY_top "deg)"; <br />div_top.style.webkitTransform = transform_rotate_top; <br />div_top.style.zIndex = zIndex_top; <br />//bottom <br />var transform_rotate_bottom = "perspective(500px) rotateX(" rotateX_bottom <br />"deg) rotateZ(" rotateZ_bottom <br />"deg) rotateY(" rotateY_bottom "deg)"; <br />div_bottom.style.webkitTransform = transform_rotate_bottom; <br />div_bottom.style.zIndex = zIndex_bottom; <br />}; <br />//重置长方体的长、宽、高 <br />this.resize = function(new_long, new_width, new_height) <br />{ <br />long = new_long; <br />width = new_width; <br />height = new_height; <br />this.refresh(); <br />}; <br />//重置长方体的位置 <br />this.move = function(new_left,new_top) { <br />top = new_top; <br />left = new_left; <br />this.refresh(); <br />}; <br />} <br /><br />function transform() { <br />cuboid.resize(parseInt(document.getElementById("long").value), <br />parseInt(document.getElementById("width").value), <br />parseInt(document.getElementById("height").value)); <br />cuboid.move(parseInt(document.getElementById("left").value), <br />parseInt(document.getElementById("top").value)); <br />cuboid.rotate(parseInt(document.getElementById("rotatex").value), <br />parseInt(document.getElementById("rotatey").value), <br />parseInt(document.getElementById("rotatez").value)); <br />//cuboid.refresh(); <br />} <br /></script>

left:px

top:px

long:px

width:px

height:px

rotateX: deg

rotateY: deg

rotateZ: deg





<script> <br />var cuboid = new cuboidModel(parseInt(document.getElementById("left").value), <br />parseInt(document.getElementById("top").value), <br />parseInt(document.getElementById("long").value), <br />parseInt(document.getElementById("width").value), <br />parseInt(document.getElementById("height").value)); <br />cuboid.init(); <br /></script>
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
如何使用CSS实现元素的旋转背景图动画效果如何使用CSS实现元素的旋转背景图动画效果Nov 21, 2023 am 09:05 AM

如何使用CSS实现元素的旋转背景图动画效果背景图动画效果可以增加网页的视觉吸引力和用户体验。本文将介绍如何使用CSS实现元素的旋转背景图动画效果,并提供具体的代码示例。首先,我们需要准备一张背景图,可以是任何你喜欢的图片,例如一张太阳或者电风扇的图片。将该图片保存并命名为“bg.png”。接下来,创建一个HTML文件,并在文件中添加一个div元素,将其设置为

Vue中如何对图片进行压缩和格式转换?Vue中如何对图片进行压缩和格式转换?Aug 25, 2023 pm 11:06 PM

Vue中如何对图片进行压缩和格式转换?在前端开发中,经常会遇到需要对图片进行压缩和格式转换的需求。特别是在移动端的开发中,为了提高页面加载速度和节省用户流量,对图片进行压缩和格式转换是很关键的。而在Vue框架中,我们可以通过一些工具库来实现对图片的压缩和格式转换。使用compressor.js库进行压缩compressor.js是一款用于压缩图片的JavaS

CSS 3D 视图属性解读:transform 和 perspectiveCSS 3D 视图属性解读:transform 和 perspectiveOct 24, 2023 am 08:11 AM

CSS3D视图属性解读:transform和perspective,需要具体代码示例引言:在现代网页设计中,3D效果已经成为了一个非常流行的元素。通过CSS的transform和perspective属性,我们可以轻松地为网页添加3D视觉效果,使页面更加生动和吸引人。本文将对这两个属性进行解读,并提供具体的代码示例。一、transform属性:transf

Vue中如何实现图片的动画和渐变效果?Vue中如何实现图片的动画和渐变效果?Aug 18, 2023 pm 06:00 PM

Vue中如何实现图片的动画和渐变效果?Vue是一种用于构建用户界面的渐进式框架,它可以轻松地实现动画和渐变效果。在本文中,将介绍如何使用Vue来实现图片的动画和渐变效果,并提供一些代码示例。一、使用Vue的过渡效果实现图片动画Vue提供了过渡效果的内置指令,可以轻松地在HTML元素上添加动画效果。使用过渡效果时,可以包裹图片元素,并在元素上添加过渡指令。示例

如何通过纯CSS实现图片的立方体转动效果的方法和技巧如何通过纯CSS实现图片的立方体转动效果的方法和技巧Oct 21, 2023 am 09:36 AM

如何通过纯CSS实现图片的立方体转动效果的方法和技巧在现代网页设计中,添加一些炫酷的效果是非常重要的,而利用CSS实现立方体转动效果是一个非常有趣而具有挑战性的任务。本文将介绍一种通过纯CSS实现图片的立方体转动效果的方法和技巧,并提供一些具体的代码示例。首先,我们需要一个基本的HTML结构,包含一个容器元素和六个面元素,每个面元素都包含一张图片。&lt;d

CSS 旋转属性探索:transform 和 rotateCSS 旋转属性探索:transform 和 rotateOct 21, 2023 am 09:46 AM

CSS旋转属性探索:transform和rotate引言:在现代网页设计中,我们经常需要为元素添加一些特殊的效果,以增加页面的吸引力和用户体验。其中,元素的旋转是一种常见的效果,可以帮助我们创建出独特的视觉效果。在CSS中,我们可以使用transform属性以及其旋转属性rotate来实现元素的旋转。本文将探索这两个属性的使用方法,并提供代

CSS 环形布局属性详解:border-radius 和 transformCSS 环形布局属性详解:border-radius 和 transformOct 21, 2023 am 11:46 AM

CSS环形布局属性详解:border-radius和transform一、简介在网页设计中,环形布局常常用于创建圆形的元素,如按钮、头像等。实现环形布局的两个关键CSS属性是border-radius和transform。本文将详细介绍如何使用border-radius和transform属性来创建环形布局,并提供具体的代码示例。二、border-ra

三维动态人脸识别是识别什么三维动态人脸识别是识别什么Dec 11, 2020 am 11:19 AM

三维动态人脸识别是识别人的骨骼轮廓;三维动态人脸识别实现三维人脸建模,人脸建模即是根据输入的人脸图像,如眼睛、鼻尖、嘴角点、眉毛以及人脸各部件轮廓点等,自动定位出面部关键特征点。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version