实现下antD官网的3D背景

一.前言

🦊大家好我是一溪风月，一名前端菜鸟，今天在工作(摸鱼)的时候看到了antD官网有一个很特别的3D倾斜效果，这个倾斜效果不仅仅有动态交互，而且上面的下拉框和多选框还等进行交互点击，本能告诉我，它的实现方案应该是先做了一个页面，然后用了某种可以进行3D转换的方法来实现的。

抱着好奇心，我打算对它进行借鉴(抄袭)，我熟练的打开控制台，看到了如下的内容，它是通过CSS的transform属性来实现的（如下图）

但是长时间不写这些样式，对本来CSS知识就匮乏的我来说，想借鉴(抄袭)都难，所以决定一次性的把transform这个属性学清楚，讲明白，然后在最后实现下这个效果。

二.初识transform

🐣transform属性的作用是用来改变元素的外观的，同时支持2D和3D，我们平时在开发过程中3D的相关设置一般不长会用到，它的基本应用场景一般是官网或者门户网站的首页，因为看起来比较绚，我们可以先看下MDN对这个属性的介绍：CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。根据介绍应该不难看出它的使用方法，那我们就来依次的使用下它的常见属性。

🚨注意：transform的所有属性的外观变化都是相对于自身而言的。MDN

三.transform常用的2D属性

🦉translate：平移（Translate）：通过translate()函数可以将元素沿x轴和y轴进行平移。例如，将元素沿x轴向右移动20像素，沿y轴向下移动40像素：也可以单独设置x轴和y轴的偏移。

css 复制代码

.content {
  width: 50px;
  height: 50px;
  background-color: aquamarine;
  transform: translate(20px, 40px);
}

🐣scale：通过scale()函数可以按照指定的比例缩放元素的大小。例如，将元素在x轴和y轴上同时放大2倍：

css 复制代码

.content {
  width: 50px;
  height: 50px;
  background-color: aquamarine;
  transform: scale(2, 2);
}

🐙rotate：通过rotate()函数可以按照指定的角度旋转元素。例如，将元素顺时针旋转45度：因为是2D的属性所以是仅仅接受一个参数在平面里面进行旋转。

css 复制代码

.content {
  width: 50px;
  height: 50px;
  background-color: aquamarine;
  transform: rotate(45deg);
}

🦊学习了前三个属性你会不会产生一个疑问，这个疑问就是，移动和旋转是基于哪个点的？其实默认情况下变换操作是以中心点为原点进行变化的，其实tranform还有另外一个属性，这个属性就是transform-origin这个元素也是基于元素自身进行设置的，比如当transform-origin设置为50%,50%这个时候原点就是中心点。

我们来实际操作下，如果旋转我们更改原点为左上角看下效果，我们可以看到元素以左上角为原点进行顺时针旋转了45度。

css 复制代码

.content {
  width: 50px;
  height: 50px;
  background-color: aquamarine;
  transform-origin: 0 0;
  transform: rotate(45deg);
}

🐳既然搞清楚了这些，那么我们就来学下2D中常用属性的最后一个也是最难理解的一个属性skew，skew是进行元素倾斜的，可以在x轴进行倾斜，也可以基于y轴进行倾斜。

css 复制代码

.content {
  width: 50px;
  height: 50px;
  background-color: aquamarine;
  transform: skew(45deg);
}

如图基于x轴进行斜切45度，那么如果沿着y轴进行斜切会是什么样的效果哪？

🔆看了这两个效果应该基本可以理解了，其实就像我们用的用四根棍子，用钉子首尾钉在一起，组成一个长方形或者正方形，沿着x轴斜切就是平行于x轴的两个边依然平行不动，拉动另外两条边使其倾斜设置的角度，这就是斜切.

三.认识transform 3D

😻如果你学习过物理你应该会知道，我们生活的世界的空间是三维的，可能有些人说加上了时间就是思维的，这个咱们不懂也不做过多的讨论，但是三位空间是一个基本的事实，三维空间和二维空间的区别在于，三维空间比二维空间多出来一条轴这条轴就是z轴，它的方向垂直屏幕向外，虽然我们在编写网页的时候基本都是写的二维的网页，但是偶尔可能也会用到三维的一些属性，看吧，我就遇到了，所以我们一次搞定它。

🤣开启3D空间：要使用 3D 变换，首先需要在父容器上设置 perspective 属性，或者直接在子元素上面使用perspective(n)函数，两个效果是一样的，这个属性决定了观察者与 3D 元素的距离，影响了 3D 效果的强度,其实就是一个透视效果，就比如我们在一条笔直的马路，马路的尽头会看起来比较窄，离自己比较近的地方看起来比较宽，这就是典型的透视，如果你学过美术应该就不难理解。

四.translate3d

😶‍🌫️translate3d其实就是分别在x y z三个方向上进行分别相对与自身原点的位移，translate3d是一个缩写属性，还有分开的写法translateX tranlateY translateZ三个写法，分别代表三个不同方向上的位移值。

tranlateX：在x轴方向进行位移。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
  perspective: 1000px;
}

.content {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  font-size: 14px;
  color: black;
  transform: translateX(120px);
  text-align: center;
  line-height: 100px;
}

translateY：在y轴方向上进行相应的位移。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
  perspective: 1000px;
}

.content {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  font-size: 14px;
  color: black;
  transform: translateY(120px);
  text-align: center;
  line-height: 100px;
}

translateZ：在z轴上进行相应的位移。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
  perspective: 1000px;
}

.content {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  font-size: 14px;
  color: black;
  transform: translateZ(120px);
  text-align: center;
  line-height: 100px;
}

tranlate3d：缩写属性，同时接收3个值，一次性设置3个方向的位移。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
  perspective: 1000px;
}

.content {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  font-size: 14px;
  color: black;
  transform: translate3d(120px, 120px, 120px);
  text-align: center;
  line-height: 100px;
}

五.scale3d

scaleX：沿着x轴方向进行三维坐标内的放大一定的倍数。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
}

.content {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  font-size: 14px;
  color: black;
  transform: perspective(1000px) scaleX(2);
  text-align: center;
  line-height: 100px;
}

🚨需要注意的是：scale中的倍数为负数的时候会使这个卡片反转。

scaleY：沿着y轴方向进行三维坐标内的放大一定的倍数。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
}

.content {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  font-size: 14px;
  color: black;
  transform: perspective(1000px) scaleY(2);
  text-align: center;
  line-height: 100px;
}

scaleZ：沿着z轴方向进行三维坐标内的放大一定的倍数。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
}

.content {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  font-size: 14px;
  color: black;
  transform: perspective(1000px) scale(2);
  text-align: center;
  line-height: 100px;
}

scale3d：缩写属性，同时沿着三个方向进行放大一定的倍数，此属性必须设置三个值。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
}

.content {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  font-size: 14px;
  color: black;
  transform: perspective(1000px) scale3d(2, 2, 2);
  text-align: center;
  line-height: 100px;
}

六.rotate3d

rotateX：以x为轴进行旋转，正值为顺时针，负值为逆时针。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
}

.content {
  width: 100px;
  height: 100px;
  font-size: 14px;
  background-color: blueviolet;
  color: black;
  transform: perspective(1000px) rotateX(40deg);
  text-align: center;
  line-height: 100px;
}

rotateY：以y为轴进行旋转，正值为顺时针，负值为逆时针。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
}

.content {
  width: 100px;
  height: 100px;
  font-size: 14px;
  background-color: blueviolet;
  color: black;
  transform: perspective(1000px) rotateY(40deg);
  text-align: center;
  line-height: 100px;
}

rotateZ：以z为轴进行旋转，正值为顺时针，复制为逆时针。

css 复制代码

.box {
  width: 900px;
  height: 500px;
  background-color: aliceblue;
  position: relative;
  margin: 0 auto;
  margin-top: 400px;
}

.content {
  width: 100px;
  height: 100px;
  font-size: 14px;
  background-color: blueviolet;
  color: black;
  transform: perspective(1000px) rotateZ(40deg);
  text-align: center;
  line-height: 100px;
}

rotate3d：定义3D旋转。rotate3d函数用于在3D空间中对元素进行旋转变换。它接受四个参数，分别表示旋转轴的向量以及旋转的角度。rotate3d函数的语法如下：其中，(x, y, z)表示旋转轴的向量，(angle)表示旋转的角度。

css 复制代码

rotate3d(x, y, z, angle)

旋转轴的向量(x, y, z)定义了围绕哪个轴进行旋转。例如，(1, 0, 0)表示绕x轴旋转，(0, 1, 0)表示绕y轴旋转，(0, 0, 1)表示绕z轴旋转。旋转角度(angle)用于指定旋转的大小。您可以使用角度单位（如度：deg）或弧度单位（如弧度：rad）来表示旋转的角度。

例如，如果您想要将一个元素绕着向量(1, 1, 0)旋转45度，可以使用以下写法：

css 复制代码

.element {
  transform: rotate3d(1, 1, 0, 45deg);
}

🚨请注意，rotate3d函数可以与其他变换函数结合使用，以创建更复杂的3D效果。您可以将多个变换函数组合在一起，例如使用translate3d进行平移、scale3d进行缩放等。

七.matrix-2D/3D（了解）

🤣2D matrix转换：transform: matrix(1, 2, 3, 4, 5, 6); 这个写法使用了 matrix 函数来应用一个 2D 变换矩阵。这个函数接受六个参数，按照顺序分别表示矩阵的六个值。

矩阵的六个值表示为：

css 复制代码

matrix(a, b, c, d, e, f)

其中，a 和 d 表示水平和垂直方向的缩放因子，b 和 c 表示水平和垂直方向的倾斜角度，e 和 f 表示水平和垂直方向的平移距离。要使用 matrix 函数，您可以将其应用于元素的 transform 属性。例如，如果您想要将一个元素进行平移、缩放和倾斜，可以使用以下写法：

css 复制代码

.element {
  transform: matrix(1, 2, 3, 4, 5, 6);
}

这里的参数值 1、2、3、4、5 和 6 是示例值，您可以根据需要替换为真实的数值。

🚨请注意，matrix 函数是一个相对底层的变换函数，它需要手动计算矩阵的数值。如果您只需要简单的平移、旋转、缩放等变换效果，可以考虑使用更具可读性和易用性的变换函数，如 translate、rotate 和 scale 等。

🦉当使用 transform: matrix3d() 函数时，提供的 16 个数字参数按照特定的顺序表示 3D 变换矩阵的各个元素。下面是每个参数的详细含义：

a1：影响水平方向的缩放和旋转。它控制物体绕 X 轴旋转和缩放的效果。

a2：影响水平方向的倾斜和旋转。它控制物体在 Y 轴上的倾斜和旋转效果。

a3：影响水平方向的倾斜和旋转。它控制物体在 Z 轴上的倾斜和旋转效果。

a4：影响水平方向的平移。它控制物体在 X 轴上的平移效果。

b1：影响垂直方向的缩放和旋转。它控制物体绕 X 轴旋转和缩放的效果。

b2：影响垂直方向的倾斜和旋转。它控制物体在 Y 轴上的倾斜和旋转效果。

b3：影响垂直方向的倾斜和旋转。它控制物体在 Z 轴上的倾斜和旋转效果。

b4：影响垂直方向的平移。它控制物体在 Y 轴上的平移效果。

c1：影响深度方向的缩放和旋转。它控制物体绕 X 轴旋转和缩放的效果。

c2：影响深度方向的倾斜和旋转。它控制物体在 Y 轴上的倾斜和旋转效果。

c3：影响深度方向的倾斜和旋转。它控制物体在 Z 轴上的倾斜和旋转效果。

c4：影响深度方向的平移。它控制物体在 Z 轴上的平移效果。

d1：通常为 0，不影响变换。

d2：通常为 0，不影响变换。

d3：通常为 0，不影响变换。

d4：通常为 1，不影响变换。

通过调整这些参数的值，您可以实现平移、旋转、缩放和倾斜等各种 3D 变换效果。

八.MDN文档写法大全

😶‍🌫️既然我们看完了上边的各种的使用方法，那么不妨也看下MDN列出的各种写法，可能matrix确实比较令人头疼，但是实际开发中我们完全可以使用自己熟悉的来实现效果。

css 复制代码

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

🔆使用方法和写法：

css 复制代码

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+

九.实现AntD的3D倾斜效果

🦉准备工作：因为我在看到这个案例之前预先搭建了一个Vue2.0的项目所以直接就借助这个模板来实现，虽然我们已经明白了3D的不同参数的用法，那么我们直接就来试着写下AntD的3D页面倾斜。

🦉首先我们来根据上面所学的基础知识来分析下这个3D图像的实现方法，在上面我们已经知道了它的实现原理，其实就是使用transform 3D来实现的，那么我们就根据这个实现方案，按照以下步骤来实现。

首先我们需要给这个3D页面一个父盒子，然后设置perspective表示要使用3D变换。
定义一个子盒子，然后使用3D的旋转属性进行三个方向的旋转。
在这个页面上面加上不同的想要作为主页面背景的组件即可。

css 复制代码

.page-skew {
  width: 100%;
  height: 700px;
  perspective: 1000px;
  position: relative;
  transform-origin: center center;
  overflow: hidden;
}
.skew-pages {
  width: 650px;
  height: 750px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  transform: rotateY(-54deg) rotateX(10deg) rotateZ(13deg);
  position: absolute;
  right: -60px;
  top: 60px;
  box-sizing: border-box;
  padding: 16px;
}

十.总结

🐙这篇文章我们讲解和学习了transform的使用方法，transform的使用方法包含2D和3D，他们的基本用法非常相似，几乎没有什么区别，需要注意的是3D的使用需要设置3D转换才会生效，在了解这些内容之后我们又学习并实现了AntD官网首页的3D的背景图，来在实战中使用这些方法，主要难点在于需要有一些空间想象能力，其次可能matrix写法比较繁琐，我们了解就好，总之学习需要多尝试，才能生巧，加油bye~