嘿，伙计们，我回来了。
让我们庆祝几个新作者来到我们45工作室。下面给大家介绍一下
。
公关教学：2位数字
教学：1
至于名字，大家已经知道一个了，另外两个更新的时候会公布
今天我们将开放CSS的一个重要部分：动画。
他的NB水平堪比HTML表单。当然更多的NB动画还是要等JS和JQuery。但是，CSS动画的威力到底有多大？维度。
是的，没有那些华丽的JS代码和那些恶心的JQuery库，CSS的动画可以轻松实现2D效果。当然还有更强大的3D效果。
如你所知，目前，我们的动画常用的尺寸是2D，2.5D和3D。先普及一下吧。
2D飞机，不用说了。
(2)3D立体，这个还是不用说的。
(3)2.5D伪3D，有意思。在次元世界里有一个神奇的公式：2D 3D=2.5D，也就是2.5D是2D和3D的结合。2.5D的确切定义不好说，先说几个2.5D的游戏：纪念碑谷，侠客.
好了，今天我们主要谈谈：CSS动画中的2D变形。
变换定义动画变换原点定义动画旋转原点。
1.transform
这是CSS动画中最重要的功能，是基础动画中必不可少的元素。就是定义某个人物(图片)的动画。这些值如下所示：
旋转(x)旋转对象缩放。
e(x,y)
我们来详细的讲一讲
rotate(x)
只有一个参数，x的值包括角度，梯度，弧度，圈，表达方式如下：
以90°为例
角度：90deg
梯度：100grad
弧度：约1.57rad
圈：0.25turn
至于他们的换算，就去百度查吧
scale(x,y)
这个简单，分别定义宽和长的缩放比例，>1为放大，<1且>0为缩小，不可以为负数
translate(x,y)
分别定义对象在x轴和y轴对于原点的偏离距离，学过向量的会比较好理解，反正这个也不怎么用
skew(x,y)
分别定义对象在x轴和y轴倾斜的角度。
————
别急着找代码和效果，在下面。。
2. transform-origin
这个必须配合rotate()使用，定义旋转对象的基点位置，默认值为50% 50%
这个就是定义旋转的中心在哪儿，50% 50%就是中心，0% 100%就是右上角。
好了，上代码吧
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#div1{position: relative;height: 200px;width: 200px;margin: 100px;padding:10px;border: 1px solid black;}#div2{padding:50px;position: absolute;border: 1px solid black;background-color: red;transform: rotate(45deg);transform-origin:0% 100%;}</style></head><body><div id="div1"><div id="div2">HELLO</div></div></body></html>
效果如下：
很多人试过会说，没有动画啊，是的，这只是动画的一部分，注意，我们这期学的是变形，而不是动画变形，动画变形会在后面的3D，帧动画讲到，敬请期待哦
好了，有问题可以在私信公众号询问哦~我们看到就会回复的~~
作者：
wawjf
（我爱微积分）
与楼上同班同学，都是很hj的人（是的）
喜欢研究理科类东西
08年出生，福建福州人，未来的█████
自学微积分，低调低调
本来想研究算法，结果在这边写稿屯图片
关注四五工作室，从零开始学WEB
如果想看到往期教程，点击下方菜单就好了啦~
HTML教程：输入HTML或者菜单点击；
CSS教程：输入CSS或者菜单点击；
JS教程：输入JS或者菜单点击；
每期一题：输入每期一题；
如果输入错误不会得到回复哦~
我们下期再见~
