2D 转换模式
transform:rotate(45deg)
deg 是单位，代表旋转多少度
transform:translate(100px,0px);
第一个参数水平方向
第二个参数垂直方向
代表块的平移
transform:scale(1.5);
元素的缩放
第一个参数：水平方向
第二个参数：垂直方向
注意点：如果取值是1，代表不变
如果取值大于1，代表需要放大
如果取值小于1，代表需要缩小
如果水平和垂直缩放都一样，那么可以简写为一个参数
- 连写注意点
- 如果需要进行多个转换那么用空格隔开
- 2D 的转换模块会修改元素的坐标系，所以旋转之后再平移就不是水平平移了
transform:rotate(45deg) translate(100px,0px) scale(1.5,1.5);
2D 转换模块-形变中心点
- 默认情况下所有的元素都是以自己的中心点作为参考来旋转的，我们可以通过形变中心点属性来修改它的参考点
transform-origin:200px 0px;
transform-origin:50% 50%;
transform-origin:center center;
- 第一个参数：水平方向
- 第二个参数：垂直方向
注意点
取值三种形式，具体像素/百分比/特殊关键词
2D 转换模块-旋转轴向
- 什么是透视
近大远小
注意点
一定要注意，透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
perspective:500px;
- 默认情况所有元素都是围绕 Z 轴进行旋转的
- 想围绕哪个轴旋转那么就在 rotate 后面直接加上哪个轴即可
transform:rotateY(45deg);
transform:rotateX(45deg);
