1.作用
使元素在位置或者形状上发生一定的改变
2.属性
transform:translate( ) rotate( ) scale( ) skew( );
位移 旋转 缩放 倾斜
3.位移 单位 px %
transform:translate(x,y);
当只取一个值，表示水平方向
当取一个值，表示水平方向
当取两个，表示水平方向和垂直方向
transform:translateX( );
transform:translateY( );
4.旋转 单位deg（弧度）
transform:rotate(30deg);
取正值，顺时针旋转
取负值，逆时针旋转
transform-origin:;修改元素的中心点（默认为宽高的一半）
注意：旋转会旋转整个左边轴，当位移和旋转同时存在，推荐位移写在旋转的前面
5.缩放 单位number
取值0-1 缩小
取值>1 放大
默认1
transform:scale(x,y);
当只取一个值，等比例缩放
当取两个值，表示水平和垂直方向
transform:scaleX( );
transform:scaleY( );
6.倾斜 单位deg
transform:skew(xdeg,ydeg);
当只取一个值，表示水平方向
当取两个值，表示水平和垂直方向
transform:skewX( );
transform:skewY( );
注意：倾斜的角度如果是直角，和页面垂直
实现翻转
- 水平翻转
transform: scale(-1,1);
- 垂直翻转
transform: scale(1,-1);
