有趣的css - 旋转的正方体

最新推荐文章于 2024-05-20 22:08:52 发布

设计师工作日常

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量1k

点赞数 20

分类专栏：有趣的css 文章标签： css 前端 ux 动画正方体加载效果

本文链接：https://blog.csdn.net/justliu1989/article/details/137581322

版权

有趣的css 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用css打造一个好看的透明感的旋转正方晶体。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

知识点：
① nth-of-type 选择器的使用
② 关于 transform 3d 模式渲染使用
③ animation 动画和 transform 变换属性的使用

思路：利用 transform 3d 模式实现正方体的 6 个面的搭建，然后 nth-of-type 选择器给每个面设置不同的样式，最后给整体的正方体加上旋转动画。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="cube-box48">
  <div class="cube48">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

6个 div 标签分别作为正方体的6个面。

css 部分代码

.cube-box48{
  position: relative;
  transform-style: preserve-3d;
  animation: cube48-eff 3s linear infinite;
}
.cube48 {
  width: 44px;
  height: 44px;
  transform-style: preserve-3d;
  transform: rotateX(35deg) rotateY(0deg) rotateZ(45deg);
}
.cube48 > div {
  height: 100%;
  position: absolute;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.7);
}
.cube48 div:nth-of-type(1) {
  background-color: rgba(55,175,202,0.4);
  transform: translateZ(-22px) rotateY(180deg);
}
.cube48 div:nth-of-type(2) {
  background-color: rgba(222,116,204,0.4);
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}
.cube48 div:nth-of-type(3) {
  background-color: rgba(222,116,204,0.4);
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}
.cube48 div:nth-of-type(4) {
  background-color: rgba(248,156,108,0.4);
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}
.cube48 div:nth-of-type(5) {
  background-color: rgba(248,156,108,0.4);
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}
.cube48 div:nth-of-type(6) {
  background-color: rgba(55,175,202,0.4);
  transform: translateZ(22px);
}
@keyframes cube48-eff {
  100% {
    transform: rotateY(360deg);
  }
}

1、先给 .cube48 元素开启 3d 模式，设置 transform-style: preserve-3d 。

2、然后使用选择器 nth-of-type 给每个面的 div 元素增加样式，并分别调整其 X轴、Y轴、Z轴的角度，配合使用 transform-origin 来定义其中几个面的变换起点，使6 个 div 6 个面，搭建出一个正方体。(这里可以多尝试，不一定要按照实例代码一模一样，你可以尝试不同的面以及不同的角度来搭建其正方体。)

3、最后，给整体 .cube-box48 元素（包裹整个正方体的元素）加上动画参数，让其整体旋转就可以。注意：这里也要开启3d模式！

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>旋转的正方体</title>
  </head>
  <body>
    <div class="app">
      <div class="cube-box48">
        <div class="cube48">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cube-box48{
  position: relative;
  transform-style: preserve-3d;
  animation: cube48-eff 3s linear infinite;
}
.cube48 {
  width: 44px;
  height: 44px;
  transform-style: preserve-3d;
  transform: rotateX(35deg) rotateY(0deg) rotateZ(45deg);
}
.cube48 > div {
  height: 100%;
  position: absolute;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.7);
}
.cube48 div:nth-of-type(1) {
  background-color: rgba(55,175,202,0.4);
  transform: translateZ(-22px) rotateY(180deg);
}
.cube48 div:nth-of-type(2) {
  background-color: rgba(222,116,204,0.4);
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}
.cube48 div:nth-of-type(3) {
  background-color: rgba(222,116,204,0.4);
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}
.cube48 div:nth-of-type(4) {
  background-color: rgba(248,156,108,0.4);
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}
.cube48 div:nth-of-type(5) {
  background-color: rgba(248,156,108,0.4);
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}
.cube48 div:nth-of-type(6) {
  background-color: rgba(55,175,202,0.4);
  transform: translateZ(22px);
}
@keyframes cube48-eff {
  100% {
    transform: rotateY(360deg);
  }
}