关于2D，3D的知识点

css3的过渡

复合属性：
transition ： 参与过渡的属性 完成事件 延迟时间 速度动画
1、初始值 和最终值
2、需要事件（事件就是用户对网页的操作）触发

参与过渡的属性

transition-property： all

完成时间

transition-duration： s ms

延迟

transition-delay

速度动画

transition-timing-function
ease 默认 逐渐变慢
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 匀速
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com
steps（） 实现一个关键逐帧动画的功能

css3 2d属性

有两个轴：x轴和y轴
x轴 正右负左
y轴 正下负上
transform： 位移 缩放 旋转 倾斜

1、位移（类似于相对定位）

transform:
translate(x,y)
translateX(x)
translateY(y)

栗子
简写一个值是设置x轴
transform:translate(300px)等价于transform:translateX(300px)

注意：如果偏移的数字设置的是百分比，代表的自身宽高的百分比

2、缩放(值是倍数，中心缩放)

transform:
scale(x,y)
scaleX(x)
scaleY(y)
注意：可以设置负数，反方向缩放，
简写一个值，代表x轴和y轴同时缩放

3、旋转

transform：
rotate(顺时针逆时针) z轴旋转（顺时针逆时针）
rotateX(x) 上下旋转
rotateY(y) 左右旋转
rotateX() rotateY()

4、倾斜

transform:
skew(X,Y)
skewX(X)
skewY(Y)
简写 ，设置一个值只倾斜x轴

变形原点

transform-origin:

          center  默认值
         单词方向
         px
         100%

矩阵用法只做了解

matrix(1,0,0,1,0,0)

ransform：matrix（0.8660254037844387，-0.49999999999999994,0.49999999999999994,0.8660254037844387,0,0);
matrix(1,0,0,1,0,0)
matrix(a,b,c,d,e,f)
e是控制x轴的位移
f是控制y轴的位移
a是控制 x轴的缩放
d是控制 y轴的缩放
旋转
顺时针
transform：matrix（cosθ，sinθ,-sinθ,cosθ,0,0);
逆时针
transform：matrix（cosθ，-sinθ,sinθ,cosθ,0,0);
sinθ=Math.sin(旋转的角度 * Math.PI / 180);
cosθ=Math.cos(旋转的角度 * Math.PI / 180)
例子： Math.sin(40 * Math.PI / 180);
Math.cos(40 * Math.PI / 180);
了解这个网站 https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

perspective 景深

近大远小的效果

父元素或者祖先元素设置
每一个子元素的景深效果各不相同
perspective：像素px
子元素设置
transform：perspective（）
每一个字元素的效果都一样

3d属性（多了z轴）

设置3d属性，必须父元素设置3d空间
transform-style：preserve-3d；
位移 、 旋转 、缩放

3d位移

z轴是设置前后移动，正前负后；
transform:translateZ(z)
transform:translate3d(x,y,z)

3d的旋转

transform：rotateZ()
transform：rotateX()
        正值: 往后
        负值：往前

transform：rotateY()
        正值： 从左到右
        负值：从右往左
transform：rotate3d(x,y,z,角度值)

3d的缩放

transform：scaleZ(z)
transform：scale3d(x,y,z)