带你走进 2D 的世界，喜欢记得下次还来哟！！
前言
2D转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。转换（transform）你可以简单理解为变形
- 移动：translate
- 旋转：rotate
- 缩放：scale
一、二维坐标系
2D 转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系，学习2D首先要先了解在html中坐标系的一个概念，以及是怎样呈现的，详细的看下图
二、2D 转换之移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似 定位。
1.语法
代码如下（示例）：
//x 就是 x 轴上移动位置，y 就是 y 轴上移动位置，中间用逗号分隔
transform: translate(x,y);
transform: translate(100px, 100px);
//或者也可分开写
1、如果只移动X坐标,可以只写一个，另一个Y轴不可省略
transform: translate(100px, 0);
transform: translateX(100px);
2、如果只移动Y坐标,可以只写一个，另一个X轴不可省略
transform: translate(0,100px);
transform: translateY(100px);
2.重点
- 定义2D转换的移动，沿着X和Y轴移动元素
- translate类似定位，不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
让一个盒子水平和垂直居中，利用定位和transform联合使用，具体案例如下所示：
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: pink;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
这样写的好处是，无论怎样改变盒子的大小，也不会改变小盒子在大盒子里面的是水平垂直居中对齐的
三、2D 转换之旋转 rotate
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。
1.语法
代码如下：
trasform: rotate(度数);
重点
- rotate里面跟度数，单位是deg，比如 ：rotate(45deg)
- 角度为正时顺时针旋转，为负时逆时针旋转
- 默认旋转的中心点是元素的中心点
2.2D 转化中心点transform-origin
我们可以设置元素转换的中心点
代码如下：
trasform-origin: x y;
重点
- 注意后面的参数x和y用空格隔开
- x y 默认转换的中心点是元素的中心点（50% 50%）
- 还可以给 x y 设置像素或者方位名词（top bottom left right center）
1、可以跟方位名词（左下角）
transform-origin: left bottom;
2、默认是 50% 50% 等价于 center center
transform-origin: 50% 50%;
transform-origin: center center;
3、可以是px 像素
transform-origin: 50px 50px;
四、2D 转换之缩放 scale
缩放，顾名思义，可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小
代码如下：
trasform: scale(x,y);
重点
- 注意后面的参数x和y用逗号隔开
- transform:scale(1,1); 宽和高都放大一倍，相当于没有放大
- transform:scale(2,2); 宽和高都放大了2倍
- transform:scale(2); 只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
- transform:scale(0.5,0.5); 缩小
- scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
五、2D 转换综合写法
1、同时使用多个转化，其格式为：transform:translate() rotate() scale()…等;
2、其顺序会影响转换的效果。（先旋转会改变坐标轴的方向）
3、当我们同时有位移和其他属性的时候，记得要将放到最前面
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
