CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战（07）

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。

transform-origin 用于更改当前元素的中心点，使元素在根据中心点做一些动效使做出更多的姿态。

transform-origin 表示当前元素的基点，使用 transform-origin 可以对目标元素的基点进行设置，在 3D 效果中，transform-origin 可以灵活运用制作出非常舒服的动态效果，给你的页面增加不少的分数。

以下是一个基础的 transform-origin 示例代码：

在以上的示例中，main-box 用作对主要 div 进行设置，设置其高宽以及其内容水平对齐方式，在此设置水平对齐为居中；随后样式 base-point 用于设置其 main-box 包裹的 div ，设置其 div display: inline-block;，此样式使其能够居中显示，随后设置了宽高、背景色以及过度效果 transition，transition 所监听的变换是 transform，时间是一秒，transform 在之后用于 rotate 旋转角度：

此时基本情况我们已经了解，现在查看 transform-origin: 0px 0px;，这段样式表示设置调用该类的元素的原点在左上角，因为其值为 0px 0px，其中 第一个 0px 表示 x，第二个 0px 表示 y，那么我们查看一个 div：

该 div 左上角的位置则是 0px 0px，x 越往右越大，y 越往下越大；接着查看样式 base-point:hover 鼠标悬浮后，使用 transform 设置其元素旋转 45 度，其中 deg 为单位，效果如下：

此时我们可以看到，左上角为一个轴心点，而这个轴心点则是我们定义的基点。

此时我们还可以使用 scale 对其进行缩放，scale 接收两个值，一个是 x 和一个 y，缩放取值0-1之间，若大于 1 则是放大，样式修改如下：

效果如下：

此时依旧依照左上角进行缩放，我们可以换成右上角，xy 值为 300px 0：

效果如下：

此时我们还可以使用 百分比定义基点位置：

此时我们可以给予该元素距离定点一定距离，设置基点为中心（其实基点直接说中心点可能较为容易理解）：

随后效果如下：

transform-origin 除了xy外还有另外一个参数 z，z 表示 z 轴，完整语法：transform-origin: x-axis y-axis z-axis;

需要搞清楚 z 的意思我们先从 rotate、translate 的 3D 值开始。

rotate3d：rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。（摘抄）

旋转轴由一组 [x, y, z] 矢量定义，如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果。

首先我们得搞清楚这个矢量在CSS 3D转换是什么，矢量在物理学中称作矢量，在数学中称作向量，而咱们使用 rotate3d() 函数输入的 x y z 则是一个矢量位置，矢量位置则是原点（0，0，0）到 这个终点的距离。

默认状态下 x y z 为0，在 rotate3d() 中有规定，空值（就是全部xyz值为0）时将会不生效：

接着，咱们使第一个 0，也就是 x 表示沿 x 轴进行旋转，若用一个正方体做比方，此时该点应该是在此位置：

效果如下：

我们再把 y 值更改为 1，然后其他值归零：

Z轴：

由此我们可以看出，期中心点在元素中间：

而其中的角度正值表示顺时针旋转，负值表示逆时针旋转，旋转方式如图所示：

从图中我们可以得知，我们以箭头方向形成一个平面，这个平面的顺时针则是该轴角度为正是的顺时针方向。

此时我们更改 rotate3d 为：

那么此时将会自定义轴，该轴为改点位置与圆心位置连成的直线：

根据该轴进行旋转

若此时将值改成 （1，2，0）：

那么对应所产生的轴也会发生变化：

最终的旋转效果如下：

此时我们可以对比，其依照的轴已经发生变化。若此时改动转动位置：

在空间中位置（画得丑，自己可以画一下）将会有一个延伸出来的 3D 轴，那么此时的转动有了 z 轴的参与将会变得更像往下

“盖住”的翻转：

效果如下：

为了更好的演示 3d 相关内容，在此使用 css 制作一个 3D盒子。

首先先创建一个 div 使其包裹对应的3d 盒子，在此需要给予一个样式，使其居中并且有一定的 margin ，否则显示起来并不会利于查看：

接着在 body下编写 div，使其调用该样式：

接下来为 3d 盒子创建一个主要的父容器进行包裹，给予样式；因为我们的外部容器设置了 text-align ，那么其内元素需要居中则需要使用 display 设置 div 为其他类型元素，在此设置为 display: inline-block;，由于在创建 3d 盒子 时，需要对其内部进行脱离文档流，需要设置其 postion 为 relative，为其具有 3d 效果 在设置 transform-style 为 preserve-3d，在给予对应 background-color ，最后设置其宽高：

整体代码如下：

此时页面效果如下：

接着，该div这是用于包裹 3d 盒子，在此我们制作3d 盒子是通过对 div 进行翻转，我们需要在这个 div 下创建 6 个 div 表示其 6 个对应的面，并且这 6 个面必须有一定的大小，在此创建一个样式为其设置宽高，以及对应的 position：

接着我们先创建第一个 div 并且调用其样式：

由于每一个面使用不同颜色方便区分，在此我们给予一个背景颜色：

此时页面显示如下：

此时再复制一个 div 作为左侧的盒子面，并且给予对应的背景色：

在此我们可以看到，在给予对应颜色时还使用了 rotate3d 毒气进行沿着 y轴进行转化，但此时页面由于是正视关系，所以看不见，需要移动柜整个盒子的父容器，所以在此我们在 box 样式中添加转动：

此时页面显示如下：

此时我们应该想到，直接使用中心点转化即可完成当前页面的转动使其归于正确的位置：

改变对应的中心点，使其沿着最左侧 Y 轴进行旋转即可完成，效果如下：

接着我们创建右侧的面，一样是创建一个 div，增加一个样式后更改其对应的中心点以及旋转角度进行转换：

效果如下：

此时我们发现当前 3d 盒子 有些面不方便查看，直接给予 box 一个 hover，使其可以转换，首先在 box 中增加一个过渡，使其 hover 时能够更好的观察其他面：

接着再编写对应的 hover：

效果如下：

此时被遮挡的区域已经可视，此时咱们继续增加对应的 div 和样式为其增加面，首先制作后面的面，只需要使用 translate 在 Z 轴往后平移与其宽度一样的值即可：

效果如下：

再接着制作 top 和 bottom 的面即可，原理跟以上类似，不过转化轴发生了改变而已，完整代码如下：

最终效果如下：

有了 3d盒子 后可以更好的对 3d 盒子进行 Z 轴上的演示。scale3d 接收 x、y、z 3个轴的值作为参数，我们在此演示 z 轴。

在此将 box 的 hover 样式更改为对应的 scale3d：

在此需要注意，其旋转内容保持不变，否则将会 hover 后变成未旋转，x和y为1表示 x y 轴上缩放不变，z 轴增加，效果如下：