CSS3——2D转换

先来学习下网页上的二维坐标系

位移

transform: translate(x,y);
transform: translateX();
transform: translateY();

作用：移动元素的位置
优点：不影响其他元素的位置
注意事项：

1. 如果不移动位置，写0
2. 可以写百分比，相对于元素自身的宽和高
3. 像素值和百分比可以写负值
   应用：孩子在父元素中水平垂直居中

/* 定位+位移 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

旋转（顺时针和逆时针）

transform: rotate();

注意点：旋转的中心点，默认为元素的中心点，可以通过transform-origin: x y;改变中心点

设置变形的中心点

transform-origin: x y;

x和y的取值：
1、可以是百分比，默认就是50% 50%
2、方位名词（left right top bottom center）
3、像素值

缩放

transform: scale(x,y);

注意点：
1、x是宽缩放的倍数，y是高缩放的倍数
2、不缩放的话就是1，不是0
3、以中心点进行缩放，中心点可以设置
4、如果只写1个参数，就是宽和高缩放相同的倍数

综合写法

transform: translate() rotate() scale();

注意点：
1、中间用空格隔开
2、如果有位移，一定先写位移