乐趣区

关于css:用css制作旋转的立方体

jiezi

作者：安小轩

原文链接：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…

局部大屏案例：


退出移动版