写点什么

用 css 制作旋转的立方体

  • 2022 年 4 月 18 日
  • 本文字数:2442 字

    阅读完需:约 8 分钟

作者:安小轩


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


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


部分大屏案例:



用户头像

全栈智能业务运维服务商 2021.03.10 加入

我们秉承Make Digital Online的使命,致力于通过先进的产品技术,为企业数字化转型和提升IT运营效率持续赋能。 https://www.cloudwise.com/

评论

发布
暂无评论
用css制作旋转的立方体_CSS_云智慧AIOps社区_InfoQ写作平台