HTML CSS寫乙個3D立方體

2022-09-13 02:45:11 字數 798 閱讀 4972

相信有許多的朋友在學3d轉換的時候很懵，或者學完之後想做個小練習獲得成就感鼓勵自己，再或者想更理解透徹。做完這小練習相信大家一定會有所收穫。廢話不多說了，直接開始：

html**：

前後上


下左右
相信大家玩過魔方以及在小學的時候學過立方體展開，上面**都能理解。

.preserve>div


.preserve
這裡主要是使用transform-style允許子元素以3d方式顯示，transform調整立方體角度方便能更清楚看懂後續操作。

.front
大多數玩魔方的朋友都有拆過魔方，一共有三根軸並相交乙個點。我們把面對到後面的那跟軸線稱為z軸，左邊到右邊稱為x軸，上邊到下邊的稱為y軸，軸相交的點稱為交點。最初始狀態六個面是在這個點上。

這裡主要是將乙個面在z軸上，向著你眼睛的方向（離你越來越近）移動200畫素。

.back
.top
這裡是對立方體頂部的操作，大家可以把收放在面前，掌心對著自己，現在是就是板塊的初始狀態。transform的第乙個值是將板塊圍繞著x軸旋轉90°，相當於手掌的上邊向後倒90°，第二個值是板塊沿著z軸運動200畫素，相當於手掌向上運動一段距離。相信大家很疑惑，為什麼是沿著z軸不應該是y軸嗎。其實每個板塊都是有自己的軸線，當我們對板塊旋轉時，自身的軸線也跟著旋轉。

.bottom


.left


.right

3D 旋轉立方體

source cube src.js var cube function this.5 function d,e,a if e if a this.1 this.1 function p j,g,b,o this.7 function this.3 function this.4 function ...

3D立方體旋轉

1 首先要知道3d,x軸，y軸，z軸的方向 如圖所示 2 要想做乙個立方體首先是做6個面 以中間為基準 中間向前面平移150px transform translatez 150px 後面也平移150px,然後旋轉 rotatey 180deg 這樣前後面就做完了。左 以中間為準逆時針針旋轉90度 ...

3d實現立方體

3d 俗稱3d變換，指基於3d立體的角度來設定盒子。例如，將盒子設定為立方體。3d的效果跟2d是一樣的，有平移和旋轉，不同點在於，2d只有x軸和y軸，3d會多乙個z軸，用於表示立體。3d的效果通過需要遠距離觀察才能看出立體效果，因為距離太近，我們只能看出平面的2d效果，這就需要在設定3d變換效果之前...