CSS之平面转换

概念：使用transform属性实现元素的位移、旋转、缩放等效果

平面转换：

1、改变盒子在平面内的形态（位移、旋转、缩放）

2、2D转换

平面转换属性

transform

位移

目标：使用translate实现元素位移效果

语法：transform：translate（水平移动距离，垂直移动距离）

取值（正负均可）

1、像素单位数值

2、百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧：

translate()如果只给出一个值，表示x轴方向移动距离

单独设置某个方向的移动距离：translateX（）&translateY（）

位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

实现方法

position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;

width:200px;
height:100px;

tr