我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

先看效果

iShot_2022-08-05_23.25.15

正方体的六面可以换成自己的女朋友哟

实现思路

先看背景，是一个径向渐变效果
- 可以通过background-image的radial-gradient做一个径向渐变
  - 例如
```
background: radial-gradient(#e66465, #9198e5);
```
重点是正方体的绘制
- 首先正方体是立体的，必要要用到一些3d属性
- 比如translateZ,rotateZ
- 而这些属性要想显示出来3d效果，都需要transform-style: preserve-3d来配合生效
  - transform-style: preserve-3d规定了元素的子元素是位于 3D 空间中还是平面中，因此需要在正方体的直接父元素上添加该属性
    
    举个例子来看下transform-style: preserve-3d的具体效果
    
    先看下平面的，用作对比
```
transform-style: flat;
```
  - 来看下3d的
```
transform-style: flat;
```
  - 可以明显看到preserve-3d是有了3d的遮挡效果的
- 然后看下怎样通过translateZ来实现正方体的搭建
  - 我们知道translateZ表示dom向Z轴移动，Z轴的正方向就是面朝我们的方向，负方向是背朝我们的方向，X轴是右为正，左为负，Y轴是下为正，上为负
  - 用一张图简单说明一下，我自己画的，可能不太好，大家凑活着理解
  - 所以transform:translateZ(10px)表示dom向我们靠近了10px
  - 先来绘制正方体
    - 我们先来定义个中心点，假设正方体的最中心为我们的基础中心点
    - 1面为正面，假设我们正方形每个边是300px，则1面为transform:translateZ(150px)
    - 2面是背面，背面可以通过translateZ(150px)和rotateX(180deg)来实现
      - rotateX表示dom围绕X轴旋转
        
        比如：
        
        transform: rotateX(0);
        
        transform: rotateX(45deg);
        
        那如果是围绕X轴旋转90deg的时候，则会从我们的视觉中消失
        
        就不贴图了因为看到的是空的
      - 回到刚才，我们要让2面成为背面，刚才说的是通过translateZ和rotateX来实现，比如translateZ(150px)将dom变成1面，然后通过围绕X轴旋转180deg变成背面，也就是rotateX(180deg)
        
        这里可能有的同学有疑问了，为什么不直接通过translateZ(-150px)直接实现呢？
        
        假设我们通过translateZ(150px)，那其实就是将dom往后推了150px，但是试想一下，这样实现的正方体一旦贴上图片，那是不是正面和背面都是从上到下的，例如，图片是一个干字，那正面和背面其实我们看到的都是干字。
        
        是不是很别扭呢？
        
        如果我们通过translateZ与rotateX来实现的背面，那是不是就成正面是干，背面是士呢？
        
        理论上，正面和背面上下顺序相反的话视觉上看着才更加舒服
      - 接下来实现3面和4面。跟2面相同，可以通过rotateX(90deg)和rotateX(-90deg)来实现
      - 5面和6面可以通过rotateY(90deg)和rotateY(-90deg)来实现
      - 这是我们按照123456的顺序来实现的，当然也可以按照162534的顺序来实现(通过rotateY(0),rotateY(90deg),rotateY(180deg),rotateY(-90deg)与rotateX(90deg),rotateX(-90deg)
- 实现了正方体之后，我们这个时候是看不到具体的正方体3d效果的，因为没有旋转的角度让我们来看
- 继续看，通过一个动画实现正方体的旋转
- 这个就很简单了，这个动画可以按照大家的意思来旋转
- 比如我这里是从animation的0%的transform: rotate3d(0, 0, 0, -360deg);旋转到100%的transform: rotate3d(1, 1, 1, 360deg);
- 然后匀速循环animation: zuan 6s linear normal infinite;

具体实现

基础html

 <div class="container">
   <div class="q1"> <img src="./img/8.webp"> </div>
   <div class="h2"> <img src="./img/8.webp"> </div>
   <div class="z3"> <img src="./img/8.webp"> </div>
   <div class="y4"> <img src="./img/8.webp"> </div>
   <div class="s5"> <img src="./img/8.webp"> </div>
   <div class="x6"> <img src="./img/8.webp"> </div>
</div>

注意.container需要设置transform-style: preserve-3d

背景样式

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, #e4e7e4, #111111);
}

关键是渐变

正方体容器搭建

.container {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  animation: zuan 6s linear normal infinite;
}

关键是开启transform-style: preserve-3d的3d视觉效果

具体的animation在后面

正方体搭建样式

先来正方体基础六个面的样式

.container div {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}
.container img {
  width: 100%;
  height: 100%;
}

透明度设置是为了视觉看上去更好看

.q1 {
  transform: translateZ(150px);
}

.h2 {
  transform: rotateY(180deg) translateZ(150px);
}

.z3 {
  transform: rotateY(-90deg) translateZ(150px);
}

.y4 {
  transform: rotateY(90deg) translateZ(150px);
}

.s5 {
  transform: rotateX(90deg) translateZ(150px);
}

.x6 {
  transform: rotateX(-90deg) translateZ(150px);
}

这是实现正方体的六个面

旋转动画样式

@keyframes zuan {
  0% {
    transform: rotate3d(0, 0, 0, -360deg);
  }

  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

完整代码

总结

关键在于正方体的实现
- translateZ与rotate3d配合实现

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

学习自老哥北极光之夜，感兴趣的可以去了解下。

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

纯css实现3d相册

前言

正文