搜尋
首頁web前端H5教程HTML5 transform三維立方體實現360無死角三維旋轉效果_html5教學技巧

為了更好得掌握transform的精髓,所以決定完成三維立方體的模型,可以達到360無死角的立體旋轉效果。

但是旋轉時判斷每個面的視圖順序比較困難,仍未完美解決,希望有人能解答!

原始碼直接貢獻啦:

複製程式碼
程式碼如下:


<script> <br />/**<br />* 本版本有下列問題: <br />* 三維旋轉的zIndex計算有問題 <br />* 仍欠缺多種模型,常見的包括:線、面、椎體、球體、橢球體等。 <br />*/ <br />function cuboidModel(left_init,top_init,long_init,width_init,height_init) <br />{ <br />{ <br />////// /////////////////////////////////// <br />//初始化私有變數<br />//// /////////////////////////////////// <br />//初始化長方體位置、大小<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 />//初始化變換角度,認為var rotateX = 0; <br />var rotateY = 0; <br />var rotateZ = 0; <br />var zIndex = 0; <br />//定義長方體六個面的div對象<br />var div_front; >var div_behind; <br />var div_left; <br />var div_right; <br />var div_top; <br />var div_bottom; <br /><br />//////////////////////// //////////////////////// <br />//初始化長方體<br />///////////////// /////////////////////// <br />//依照初始位置建構六個面。 <br />this.init = function() { <br />//建立front div <br />div_front = document.createElement("div"); <br />div_front.className = "cuboid_side_div"; <br />divdiv_RML. = "div front"; <br />div_front.style.backgroundColor="#f1b2b2"; <br />document.body.appendChild(div_front); <br />//建立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.backgroundor="#bd91eb"; <br />div_behind.style.backgroundor="#bd91eb"; <br />> div_behind); <br />//建立left div <br />div_left = document.createElement("div"); <br />div_left.className = "cuboid_side_div"; <br />div_left.innerHTML = "divleftinnerHTML"; >div_left.style.backgroundColor="#64a3c3"; <br />document.body.appendChild(div_left); <br />//建立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);建立top div <br />div_top = document.createElement("div"); <br />div_top.className = "cuboid_side_div"; <br />div_top.innerHTML = "Col top"; <br />div_top.style.backgroundor="style. #e7db78"; <br />document.body.appendChild(div_top); <br />//建立bottom div <br />div_bottom = document.createElement("div"); <br />div_bottom.className = "cuboid_side_divcuboid <Ddiv""; 🎜>div_bottom.innerHTML = "div bottom"; <br />div_bottom.style.backgroundColor="#e79c78"; <br />document.body.appendChild(div_bottom); <br />this.refresh(); ; <br />//重繪<br />this.refresh = function() <br />{ <br />//定義div_front樣式<br />div_front.style.left = left "px"; <br />div_front.stylestyle .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 />//定義div_behind樣式<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%; <br />div_behind.style.webkitTransformOrigin = "50% 50% "(-1150% "(-1 )*width / 2) "px"; <br />//定義div_left樣式<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 />divkit_left.style.webkitTransformOinrigin = "50% 50% " ((-1) * long /2 ) "px"; <br />//定義div_right樣式<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>div_right.style.webkitTransformOrigin = "50 % 50% " ((-1) * long /2 ) "px"; <br />//定義div_top樣式<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 />//定義div_bottom樣式<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 />//旋轉立方體<br />this.rotate = function(x,y,z) { <br />rotateX = x; <br />rotateY = y; <br />rotateZ = z; <br />var rotateX_front = rotateX; <br />varrotateY_front = 電影Y; <br />varrotateZ_front=rotateZ; <br />//可以這個面手機最地 <br />varrotateX_behind =rotateX_front 180; <br />varrotateY_behind=rotateY_front*(-1); <br />varrotateZ_behind=rotateZ_front*(-1); <br />varrotateX_top=rotateX_front 90; <br />varrotateY_top=rotateZ_front; <br />varrotateZ_top=rotateY_front*(-1); <br />varrotateX_bottom=rotateX_front-90; <br />varrotateY_bottom=rotateZ_front*(-1); <br />varrotateZ_bottom=rotateY_front; <br />varrotateX_left=rotateX_front 90; <br />varrotateY_left=rotateZ_front - 90; <br />varrotateZ_left=rotateY_front*(-1); <br />varrotateX_right=rotateX_front 90; <br />varrotateY_right=rotateZ_front 90; <br />varrotateZ_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_front","zIndex_right"], <br />[" “”]]; <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]; <🎜>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 />vartransform_rotate_front = "perspective(500px) 回転X(" 回転X_フロント <br />"度) 回転Y(" 回転Y_フロント <br />"度) 回転Z(" 回転Z_フロント "度)"; <br />div_front.style.webkitTransform =transform_rotate_front; <br />div_front.style.zIndex = zIndex_front; <br />//behind <br />vartransform_rotate_behind = "perspective(500px)rotateX("rotateX_behind<br />"度)rotateY("rotateY_behind <br />"度)rotateZ("rotateZ_behind "度)"; <br />div_behind.style.webkitTransform =transform_rotate_behind; <br />div_behind.style.zIndex = zIndex_behind; <br />//left <br />vartransform_rotate_left = "perspective(500px)rotateX("rotateX_left <br />"度)rotateZ("rotateZ_left <br />"度)rotateY("rotateY_left "度)"; <br />div_left.style.webkitTransform =transform_rotate_left; <br />div_left.style.zIndex = zIndex_left; <br />//right <br />vartransform_rotate_right = "perspective(500px)rotateX("rotateX_right <br />"度)rotateZ("rotateZ_right <br />"度)rotateY("rotateY_right "度)"; <br />div_right.style.webkitTransform =transform_rotate_right; <br />div_right.style.zIndex = zIndex_right; <br />//top <br />vartransform_rotate_top = "perspective(500px) 回転X(" 回転X_トップ <br />"度) 回転Z(" 回転Z_トップ <br />"度) 回転Y(" 回転Y_トップ "度)"; <br />div_top.style.webkitTransform =transform_rotate_top; <br />div_top.style.zIndex = zIndex_top; <br />//bottom <br />vartransform_rotate_bottom = "perspective(500px)rotateX("rotateX_bottom <br />"度)rotateZ("rotateZ_bottom <br />"度)rotateY("rotateY_bottom "度)"; <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 />幅 = 新しい幅; <br />高さ = 新しい高さ; <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" )。価値)); <br />//cuboid.refresh(); <br />} <br /></script>

左:px

上:px

long:px

width:px

高さ:px

rotateX: deg

rotateY: deg

rotateZ: deg






var cuboid = new cuboidModel(parseInt(document.getElementById("left").value),
parseInt(document.getElementById("top").value),
parseInt(document.getElementById(" long").value)、
parseInt(document.getElementById("width").value)、
parseInt(document.getElementById("height").value));
cuboid.init();

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具