CSS——Transition过渡和Transform变形

Transition过渡
　　 transition-property：　　　　　　　　规定设置过渡效果的CSS属性样式
　　transition-duration:　　　　　　　　规定完成过渡效果需要多少秒或毫秒
　　transition-delay:　　　　　　　　　　　　完成过渡效果时什么时候开始
　　transition-timing-function: 　　　　　　　　 规定速度效果的速度曲线
　　　　linear 匀速
　　　　ease(默认值) 曲线，先快后慢，逐渐慢下来
　　　　ease-in 加速，越来越快
　　　　ease-out 减速，越来越慢
　　　　ease-in-out 先加速后减速
　　　　cubic-bezier

Transform变形
　　 transform:

　　　　translate 　　　　 位移
　　　　　　translateX、
　　　　　　translateY、
　　　　　　translateZ(3D)

　　　　scale 　　　　　　 缩放(会以当前元素中心点进行缩放)
　　　　　　scaleX、
　　　　　　scaleY、
　　　　　　scaleZ(3D)

　　　　rotate 　　　　　　　　 旋转 (旋转的值，单位是角度deg)
　　　　　　rotateX(3D)、
　　　　　　rotateY(3D)、
　　　　　　rotateZ(和rotate是等价关系，正值顺时针，负值逆时针)
　　　　skew 斜切
　　　　　　skewX(单位角度，正值向左倾斜，负值向右倾斜)
　　　　　　skewY
　　transform注意事项：
　　　　1、变形操作不会影响到其他元素
　　　　2、变形操作只能添加给块元素，但是不能添加给内联元素
　　　　3、复合写法，可以添加多个变形操作：
　　　　　　执行是有顺序的，先执行后面的操作，再执行前面的操作
　　　　　　translate会受到scale、rotate、skew的影响
　　　　4、transform-origin：变形基点位置
　　　　　　X Y Z(3D)

　　transform3D相关属性：
　　　　rotateX() 　　　　　　正值向上翻转
　　　　rotateY() 　　　　　　正值向右翻转
　　　　translateZ() 　　　　正值向前，负值向后
　　　　scaleZ() 　　　　　　立体元素的厚度

　　3D写法：
　　　　rotate3d(x,y,z,deg) x:0|1(x轴是否添加旋转角度)；y:0|1(y轴是否添加旋转角度) z:0|1(z轴是否添加旋转角度)
　　　　scale3d(x,y,z)
　　　　translate3d(x,y,z)
变形中经常用到的标签和属性：
　　perspective:　　　　　　　　离屏幕多远的距离去观察元素，值越大幅度越小
　　perspective-origin:　　　　　　　　景深——基点位置，观察元素的角度
　　transform-origin:x y z
　　transform-style:　　　　　　　　　　3D空间
　　flat(默认2d)、preserve-3d(3D,产生一个三维空间)
　　backface-visivility:　　　　　　　　　　背面隐藏
　　hidden、visible(默认值)