若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。
一、transform-origin
transform-origin 用于更改当前元素的中心点，使元素在根据中心点做一些动效使做出更多的姿态。
transform-origin 表示当前元素的基点，使用 transform-origin 可以对目标元素的基点进行设置，在 3D 效果中，transform-origin 可以灵活运用制作出非常舒服的动态效果，给你的页面增加不少的分数。
以下是一个基础的 transform-origin 示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画重点</title><style>.main-box {width: 100%;height: 100%;text-align: center;}.base-point {transform-origin: 0px 0px;display: inline-block;width: 300px;height: 300px;background-color: brown;transition: transform 1s;}.base-point:hover {transform: rotate(30deg);}</style>
</head><body><div class="main-box"><div class="base-point"></div></div>
</body></html>
rotate
在以上的示例中，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 则是放大，样式修改如下：
<style>
.base-point:hover {transform: scale(1.2, 1.5);}
</style>
效果如下：
此时依旧依照左上角进行缩放，我们可以换成右上角，xy 值为 300px 0：
效果如下：
此时我们还可以使用 百分比定义基点位置：
此时我们可以给予该元素距离定点一定距离，设置基点为中心（其实基点直接说中心点可能较为容易理解）：
随后效果如下：
transform-origin 除了xy外还有另外一个参数 z，z 表示 z 轴，完整语法：transform-origin: x-axis y-axis z-axis;
需要搞清楚 z 的意思我们先从 rotate、translate 的 3D 值开始。
二、rotate3d
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）时将会不生效：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画重点</title><style>.main-box {width: 100%;height: 100%;margin-top: 300px;text-align: center;position: relative;}.box1,.box2 {position: absolute;width: 300px;height: 300px;display: inline-block;transition: transform 1s;}.box1 {/*transform: rotateY(60deg);*/background-color: brown;}.box1:hover {transform: rotate3d(0, 0, 0, 90deg);}</style>
</head><body><div class="main-box"><img class="box1" src="./img/img05.jpg" /></div>
</body></html>
接着，咱们使第一个 0，也就是 x 表示沿 x 轴进行旋转，若用一个正方体做比方，此时该点应该是在此位置：
效果如下：
我们再把 y 值更改为 1，然后其他值归零：
Z轴：
由此我们可以看出，期中心点在元素中间：
而其中的角度正值表示顺时针旋转，负值表示逆时针旋转，旋转方式如图所示：
从图中我们可以得知，我们以箭头方向形成一个平面，这个平面的顺时针则是该轴角度为正是的顺时针方向。
复杂旋转
此时我们更改 rotate3d 为：
那么此时将会自定义轴，该轴为改点位置与圆心位置连成的直线：
根据该轴进行旋转
若此时将值改成 （1，2，0）：
那么对应所产生的轴也会发生变化：
最终的旋转效果如下：
此时我们可以对比，其依照的轴已经发生变化。若此时改动转动位置：
在空间中位置（画得丑，自己可以画一下）将会有一个延伸出来的 3D 轴，那么此时的转动有了 z 轴的参与将会变得更像往下
“盖住”的翻转：
效果如下：
三、使用 CSS 做一个 3d 盒子
为了更好的演示 3d 相关内容，在此使用 css 制作一个 3D盒子。
首先先创建一个 div 使其包裹对应的3d 盒子，在此需要给予一个样式，使其居中并且有一定的 margin ，否则显示起来并不会利于查看：
<style>
.container {width: 100%;margin: 200px auto;text-align: center;
}
</style>
接着在 body下编写 div，使其调用该样式：
<div class="container">
</div>
接下来为 3d 盒子创建一个主要的父容器进行包裹，给予样式；因为我们的外部容器设置了 text-align ，那么其内元素需要居中则需要使用 display 设置 div 为其他类型元素，在此设置为 display: inline-block;，由于在创建 3d 盒子 时，需要对其内部进行脱离文档流，需要设置其 postion 为 relative，为其具有 3d 效果 在设置 transform-style 为 preserve-3d，在给予对应 background-color ，最后设置其宽高：
<style>
.box {display: inline-block;width: 200px;height: 200px;position: relative;transform-style: preserve-3d;background-color: brown;}
</style>
整体代码如下：
此时页面效果如下：
接着，该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 的面即可，原理跟以上类似，不过转化轴发生了改变而已，完整代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D Box 1_bit</title><style>.container {width: 100%;margin: 150px auto;text-align: center;}.box {display: inline-block;width: 200px;height: 200px;position: relative;transform-style: preserve-3d;background-color: brown;transform: rotate3d(1, 1, 0, 65deg);transition: transform 1.6s;}.box:hover {transform: rotate3d(1, 1, 0, 265deg);}.plane {width: 200px;height: 200px;position: absolute;}.plane-before {background-color: chocolate;}.plane-left {background-color: crimson;transform-origin: 0% 0%;transform: rotate3d(0, 1, 0, 90deg);}.plane-right {background-color: rgb(220, 20, 203);transform-origin: 100% 100%;transform: rotate3d(0, 1, 0, -90deg);}.plane-bottom {background-color: rgb(20, 80, 220);transform-origin: 100% 100%;transform: rotate3d(1, 0, 0, 90deg);}.plane-top {background-color: rgb(240, 113, 45);transform-origin: 0% 0%;transform: rotate3d(1, 0, 0, -90deg);}.plane-after {background-color: rgb(220, 20, 20);transform: translateZ(-200px)}</style>
</head><body><div class="container"><div class="box"><div class="plane plane-before"></div><div class="plane plane-left"></div><div class="plane plane-right"></div><div class="plane plane-after"></div><div class="plane plane-bottom"></div><div class="plane plane-top"></div></div></div>
</body></html>
最终效果如下：
四、scale3d 使用
有了 3d盒子 后可以更好的对 3d 盒子进行 Z 轴上的演示。scale3d 接收 x、y、z 3个轴的值作为参数，我们在此演示 z 轴。
在此将 box 的 hover 样式更改为对应的 scale3d：
在此需要注意，其旋转内容保持不变，否则将会 hover 后变成未旋转，x和y为1表示 x y 轴上缩放不变，z 轴增加，效果如下：
