2d过渡到3d

1. 2D移动、缩放、转动、拉长或拉伸

注：只设置一个X或Y

 transform:
            translate()
            translate(x,y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
            translateX(x),translateY(y)

---

transform-origin(x,y)设置旋转中心点
            transform-originX(X)
            transform-originY(Y)
            rotate()在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
            rotateX(),rotateY()
            scale(宽度,高度)
            scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 缩放：
            设置为负数镜像方式放大缩小
            scaleX(X),scaleY(Y)
            skew(Xdeg,Ydeg)

2. 3d

transform-style: preserve-3d  ----  2d过渡到3d

ease  ----  规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in  ---- 规定以慢速开始的过渡效果
ease-out  -----  规定以慢速结束的过渡效果
ease-in-out  ----  规定以慢速开始和结束的过渡效果

---

transition-property  ----  指定CSS属性的name，transition效果
transition-duration  -----  transition效果需要指定多少秒或毫秒才能完成
transition-timing-function  -----  指定transition效果的转速曲线
transition-delay  -----  定义transition效果开始的时候

---

animation: 动画的名称 时间 运动曲线 开始时间 

animation-name  ----  指定要绑定到选择器的关键帧的名称
animation-duration  ----  动画指定需要多少秒或毫秒完成
animation-timing-function  ----  设置动画将如何完成一个周期
animation-delay  ----  设置动画在启动前的延迟间隔
animation-iteration-count  ----  定义动画的播放次数
animation-direction  ----  指定是否应该轮流反向播放动画
animation-fill-mode  ----  规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state  ----  指定动画是否正在运行或已暂停

---

linear  ----  动画从头到尾的速度是相同的    
ease  ----  默认，动画以低速开始，然后加快，在结束前变慢    
ease-in  ----  动画以低速开始 
ease-out  ----  动画以低速结束   
ease-in-out  ----  动画以低速开始和结束
infinite  ----  无限播放