Transform概念

元素在坐标系统中变形，属性包含变形函数，可以移动旋转和缩放元素

transform 2D转换

1.旋转
通过指定参数角度，对元素进行2D转换
语法：
transform:rotate(角度)
角度：正值顺时针旋转，负值逆时针旋转
2.移动
通过给x轴和y轴给定的参数，从当前位置移动
语法：
transform:translateX(value)
transform:translateY(value)
transform:translate(x,y)
3.缩放
指定2D缩放
语法：
transform:scaleX(value)水平方向缩放
transform:scaleY(value)垂直方向缩放
transform:scale(x,y)(第二个参数没有的时候，默认和第一个参数相同，等比放大缩小）
4.扭曲
指定斜切扭曲
transform:skewX(角度)水平方向扭曲
transform:skewY(角度)垂直方向扭曲
transform:skew(x,y)
5.矩阵martrix
transform:matrix(a,c,b,d,tx,ty)

Transform 3D转换

1.旋转
以x,y,z轴为轴来旋转

image.png

2.移动
增加translateZ方法，对应Z轴平移，用于遮罩

image.png
image.png
3.缩放
增加scaleZ方法
image.png
image.png

4.矩阵matrix3D

image.png

Transform-origin

定义坐标原点，默认值为元素的几何中心

矩阵理论

1.转换公式

image.png
image.png

2.矩阵应用

image.png
应用于镜像实现