作者：安小軒
創(chuàng)新互聯(lián)建站長(zhǎng)期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為突泉企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，突泉網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
原文鏈接：https://juejin.cn/post/
實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)的立方體，只需要用css的基本屬性就可以實(shí)現(xiàn)。我們一起看看吧~
transform可以實(shí)現(xiàn)元素的2D或3D轉(zhuǎn)換，可以對(duì)元素進(jìn)行旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。
基本屬性有：
重慶分公司
重慶分公司
translate）,也可以單個(gè)設(shè)置某個(gè)方向的轉(zhuǎn)換scale）,也可以單個(gè)設(shè)置某個(gè)方向的縮放rotate）,也可以單個(gè)設(shè)置某個(gè)方向的旋轉(zhuǎn)skew）,也可以單個(gè)設(shè)置某個(gè)方向的傾斜perspective(n) 為 3D 轉(zhuǎn)換元素定義透視視圖需求分析：繪制6個(gè)面，將面進(jìn)行旋轉(zhuǎn)，移動(dòng)組成一個(gè)立方體，加入動(dòng)畫效果，使其旋轉(zhuǎn)起來。
復(fù)制代碼
.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);
}
復(fù)制代碼
如圖，所有面都疊在一起，此時(shí)需要設(shè)置transform屬性改變每個(gè)面的位置，使得其達(dá)到3d立方體效果。
需要設(shè)置外層div在z軸上負(fù)向移動(dòng)150px
transform: translateZ(-150px)
復(fù)制代碼
同時(shí)要設(shè)置3d效果。這樣正面就不會(huì)被后面覆蓋
transform-style: preserve-3d;
復(fù)制代碼
設(shè)置正面，z軸正向移動(dòng)150px
transform: translateZ(150px);
復(fù)制代碼
設(shè)置背面，z軸負(fù)向移動(dòng)150px
transform: translateZ(150px);
復(fù)制代碼
設(shè)置左面，先y軸負(fù)向移動(dòng)150px，再x軸旋轉(zhuǎn)90°
transform: translateY(-150px) rotateX(90deg);
復(fù)制代碼
設(shè)置右面，先y軸正向移動(dòng)150px，再x軸旋轉(zhuǎn)90°
transform: translateY(150px) rotateX(90deg);
復(fù)制代碼
設(shè)置上面，先x軸負(fù)向移動(dòng)150px，再y軸旋轉(zhuǎn)90°
transform: translateX(-150px) rotateY(90deg);
復(fù)制代碼
設(shè)置下面，先x軸正向移動(dòng)150px，再y軸旋轉(zhuǎn)90°
transform: translateX(150px) rotateY(90deg);
復(fù)制代碼
main {
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
復(fù)制代碼
.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);
}
復(fù)制代碼
代碼看起來是不是很簡(jiǎn)單，只需要利用css的transform的基本屬性就可以實(shí)現(xiàn)了。還可以給每個(gè)面設(shè)置背景圖片，這樣就可以炫一把了，再加上前面的雪花效果，那就更酷了，快動(dòng)手試試吧~
近年來，在AIOps領(lǐng)域快速發(fā)展的背景下，IT工具、平臺(tái)能力、解決方案、AI場(chǎng)景及可用數(shù)據(jù)集的迫切需求在各行業(yè)迸發(fā)。基于此，云智慧在2021年8月發(fā)布了AIOps社區(qū)， 旨在樹起一面開源旗幟，為各行業(yè)客戶、用戶、研究者和開發(fā)者們構(gòu)建活躍的用戶及開發(fā)者社區(qū)，共同貢獻(xiàn)及解決行業(yè)難題、促進(jìn)該領(lǐng)域技術(shù)發(fā)展。
社區(qū)先后 開源 了數(shù)據(jù)可視化編排平臺(tái)-FlyFish、運(yùn)維管理平臺(tái) OMP 、云服務(wù)管理平臺(tái)-摩爾平臺(tái)、 Hours 算法等產(chǎn)品。
可視化編排平臺(tái)-FlyFish：
項(xiàng)目介紹：https://www.cloudwise.ai/flyFish.html
Github地址： https://github.com/CloudWise-OpenSource/FlyFish
Gitee地址： https://gitee.com/CloudWise/fly-fish
行業(yè)案例：https://www.bilibili.com/video/BV1z44y1n77Y/
部分大屏案例：
