2D、3D模型相关知识

一、2D转换

1、transform:translate()：平移，单位可以是%，但是%是自己的不是父元素的

默认为沿着X轴方向移动

transform:translateX()沿着x轴方向进行移动，translateY()沿着y轴方向进行移动，

translate(20px,20px)定义2D平移（translateX(20px) translateY(20px)）

2、transform:scale()缩放，默认值是1，比1小时缩小，比1大时放大

scale()同时设置x和y方向

scaleY()设置y方向

scaleX()设置x方向

scale(2,3)定义2D缩放

该元素的增加取决于x和y方向的值，可以取负数，但是取负数时先进行旋转（顺时针（180deg）），再缩放

3、transform:rotate()旋转，默认沿着z轴方向进行旋转,单位deg

rotateX()，按照X轴给定的参数，从当前元素位置开始旋转

rotateY()，按照Y轴给定的参数，从当前元素位置开始旋转

4、transform:skew()倾斜，单位deg，默认是沿着x轴倾斜

skewX()通过设置X轴的值来定义倾斜转换

skewY()通过设置Y轴的值来定义倾斜转换

skew(30deg，130deg)定义2D倾斜

5、transform:perspactive()景深，用来设置用户的眼睛距离图像的距离，数值越大，图像越小

6、transform-origin:x,y  设置元素运动的基点ÿ