CSS的2D转换

1.转换transform

可实现元素的位移，旋转，缩放等效果

• 移动:translate

• 旋转:rotate

• 缩放:scale

2D 转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

语法：

transform:translate(x，y);或者分开写
transform:translateX(n);
transform:translateY(n);

重点：

1. 定义 2D 转换中的移动，沿着X和Y轴移动元素

2. translate最大的优点:不会影响到其他元素的位置

3. translate中的百分比单位是相对于自身元素(也就是自身盒子的宽度)的translate:(50%,50%);

4. 对行内标签没有效果（注意）

显示盒子水平垂直居中：

position:absolute   //子绝父相
translate:(50%,50%)  //直接复制

2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法：

transform:rotate(度数)

重点：

1. rotate里面跟度数，单位是deg 比如rotate(45deg)

2. 角度为正时，顺时针，负时，为逆时针

3. 默认旋转的中心点是元素的中心点

2D 转换中心点 transform-origin

我们可以设置元素转换的中心点

1.语法

transform-origin:xy;

2.重点

1. 注意后面的参数 x和y用空格隔开

2. xy默认转换的中心点是元素的中心点(50% 50%)

3. 还可以给xy设置 像素或者方位名词(top bottom left right center)