用css制作旋转的立方体

作者：安小轩
创新互联建站长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为突泉企业提供专业的成都网站设计、成都网站建设，突泉网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

原文链接：https://juejin.cn/post/

实现一个旋转的立方体，只需要用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个面

.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/

部分大屏案例：

名称栏目：用css制作旋转的立方体
链接地址：http://scjbc.cn/article/dsojesg.html