css3中的2d转换和3d转换笔记

2d转换 transform
-位移 translate
transform：translate(X,Y)
transform：translateX(100px)
transform：translateY(100px)
-旋转 rotate
transform:rotate(30deg)XY同时旋转
transform:rotateX(30deg)
transform:rotateY(30deg)
-缩放 scale
transform：scale(2,2)XY同时放大
transform：scale(0.5,0.5)XY同时缩小
transform：scaleX(0.5)X缩小
transform：scaleY(2)Y放大
-倾斜 skew
transform：skew(30deg,60deg)XY同时倾斜
transform：skewX(30deg)X倾斜
transform：skewY(30deg)Y倾斜
3d倾斜和2d一模一样，只有两个轴XY没有Z
-矩阵 matrix/嘛锤k思/
矩阵将上面位移，旋转，倾斜，缩放合到一起写，通过算法写，2d有3*3个参数就是9个

不用矩阵还可以通过每一项空格隔开写
transform：translate(100px,100px) rotate(40deg) scale(2,2) skew(30deg,40deg);

transform：translate(100px,100px)
transform：rotate(40deg)
rotate会把translate替换

转换基点 margin
transform-origin:left/right/center/top/bottom

3d转换 transform XYZ三个轴
-位移 translate
transform：translate3d(X,Y,Z)
transform：translateX(100px)
transform：translateY(100px)
transform：translateZ(100px)
-旋转 rotate
transform:rotate3d(1,1,1,30deg)XYZ同时旋转
transform:rotateX(30deg)
transform:rotateY(30deg)
transform:rotateZ(30deg)Z轴转就是XY同时转
-缩放 scale
transform：scale3d(2,2,2)XY同时放大
transform：scale(0.5,0.5)XY同时缩小
transform：scaleX(0.5)X缩小
transform：scaleY(2)Y放大
transform：scaleZ(2)Z放大
-倾斜 skew
transform：skew(30deg,60deg)XY同时倾斜
transform：skewX(30deg)X倾斜
transform：skewY(30deg)Y倾斜
3d倾斜和2d一模一样，只有两个轴XY没有Z
-矩阵 matrix
3d矩阵参数是4*4个参数就是16个参数去算