作者：安小轩
原文链接：https://juejin.cn/post/708627...
实现一个旋转的立方体，只须要用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/flyF...
Github地址： https://github.com/CloudWise-...
Gitee地址： https://gitee.com/CloudWise/f...
行业案例：https://www.bilibili.com/vide...
局部大屏案例：