用css製作旋轉的立方體
作者：安小軒
實現一個旋轉的立方體，只需要用css的基本屬性就可以實現。我們一起看看吧~
一：transform 基本屬性
transform可以實現元素的2D或3D轉換，可以對元素進行旋轉，縮放，移動，傾斜等。
基本屬性有：
1. 移動 可以整個設定設定屬性（translate）,也可以單個設定某個方向的轉換
- translate(x,y) 2D 轉換
- translate3d(x,y,z) 定義 3D 轉換
- translateX(x) X 軸轉換
- translateY(y) Y 軸轉換
- translateZ(z) Z 軸轉換
2. 縮放 可以整個設定設定屬性（scale）,也可以單個設定某個方向的縮放
- scale(x[,y]?) 2D 縮放轉換
- scale3d(x,y,z) 3D 縮放轉換
- scaleX(x) 設定 X 軸的值來定義縮放轉換
- scaleY(y) 設定 Y 軸的值來定義縮放轉換
- scaleZ(z) 設定 Z 軸的值來定義 3D 縮放轉換
3. 旋轉 可以整個設定設定屬性（rotate）,也可以單個設定某個方向的旋轉
- rotate(angle) 2D 旋轉
- rotate3d(x,y,z,angle) 3D 旋轉
- rotateX(angle) 沿著 X 軸的 3D 旋轉
- rotateY(angle) 沿著 Y 軸的 3D 旋轉
- rotateZ(angle) 沿著 Z 軸的 3D 旋轉
4. 傾斜 可以整個設定設定屬性（skew）,也可以單個設定某個方向的傾斜
- skew(x-angle,y-angle) 沿著 X 和 Y 軸的 2D 傾斜轉換
- skewX(angle) 沿著 X 軸的 2D 傾斜轉換
- skewY(angle) 沿著 Y 軸的 2D 傾斜轉換
5. 設定3d的透視
-
perspective(n) 為 3D 轉換元素定義透視檢視
二：旋轉的立方體
需求分析：繪製6個面，將面進行旋轉，移動組成一個立方體，加入動畫效果，使其旋轉起來。
1. 繪製立方體的6個面
<div class="cube">
<main>
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</main>
</div>
複製程式碼
.cube div{
width: 300px;
height: 300px;
position: absolute;
}
.front {
background: rgba(100, 0, 100, 0.6);
}
.back {
background: rgba(0, 100, 100, 0.5);
}
.left {
background: rgba(100, 1000, 100, 0.5);
}
.right {
background: rgba(1000, 100, 100, 0.5);
}
.top {
background: rgba(1000, 0, 0, 0.5);
}
.bottom {
background: rgba(0, 0, 1000, 0.5);
}
複製程式碼
如圖，所有面都疊在一起，此時需要設定transform屬性改變每個面的位置，使得其達到3d立方體效果。
2. 將6個面進行縮放旋轉
需要設定外層div在z軸上負向移動150px
transform: translateZ(-150px)
複製程式碼
同時要設定3d效果。這樣正面就不會被後面覆蓋
transform-style: preserve-3d;
複製程式碼
設定正面，z軸正向移動150px
transform: translateZ(150px);
複製程式碼
設定背面，z軸負向移動150px
transform: translateZ(150px);
複製程式碼
設定左面，先y軸負向移動150px，再x軸旋轉90°
transform: translateY(-150px) rotateX(90deg);
複製程式碼
設定右面，先y軸正向移動150px，再x軸旋轉90°
transform: translateY(150px) rotateX(90deg);
複製程式碼
設定上面，先x軸負向移動150px，再y軸旋轉90°
transform: translateX(-150px) rotateY(90deg);
複製程式碼
設定下面，先x軸正向移動150px，再y軸旋轉90°
transform: translateX(150px) rotateY(90deg);
複製程式碼
3.立方體加上動畫效果
main {
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
複製程式碼
三：旋轉的立方體的全部程式碼
.cube {
width: 300px;
height: 300px;
perspective: 900px;
}
main {
width: 100%;
height: 100%;
transform: translateZ(-150px);
transform-style: preserve-3d;
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div{
width: 100%;
height: 100%;
position: absolute;
}
.front {
background: rgba(100, 0, 100, 0.6);
transform: translateZ(150px);
}
.back {
background: rgba(0, 100, 100, 0.5);
transform: translateZ(-150px);
}
.left {
background: rgba(100, 1000, 100, 0.5);
transform: rotateY(90deg) translateZ(150px) ;
}
.right {
background: rgba(1000, 100, 100, 0.5);
transform: rotateY(90deg) translateZ(-150px);
}
.top {
background: rgba(1000, 0, 0, 0.5);
transform: rotateX(90deg) translateZ(-150px);
}
.bottom {
background: rgba(0, 0, 1000, 0.5);
transform: rotateX(90deg) translateZ(150px);
}
複製程式碼
程式碼看起來是不是很簡單，只需要利用css的transform的基本屬性就可以實現了。還可以給每個面設定背景圖片，這樣就可以炫一把了，再加上前面的雪花效果，那就更酷了，快動手試試吧~
寫在最後
近年來，在AIOps領域快速發展的背景下，IT工具、平臺能力、解決方案、AI場景及可用資料集的迫切需求在各行業迸發。基於此，雲智慧在2021年8月釋出了AIOps社群， 旨在樹起一面開源旗幟，為各行業客戶、使用者、研究者和開發者們構建活躍的使用者及開發者社群，共同貢獻及解決行業難題、促進該領域技術發展。
社群先後 開源 了資料視覺化編排平臺-FlyFish、運維管理平臺 OMP 、雲服務管理平臺-摩爾平臺、 Hours 演算法等產品。
視覺化編排平臺-FlyFish：
專案介紹：https://www.cloudwise.ai/flyFish.html
Github地址： https://github.com/CloudWise-OpenSource/FlyFish
Gitee地址： https://gitee.com/CloudWise/fly-fish
行業案例：https://www.bilibili.com/video/BV1z44y1n77Y/
部分大屏案例：