2D 3D动画

1、2D转换之移动translate
transform:translate(x,y)
transform:translateX(n)
transform:translateY(n)
沿着x y轴移动 不会影响其他元素的位置
2、2D转换之旋转rotate
transform:rotate(度数)
rotate里面跟度数 单位是deg
角度为正是时，顺时针 为负时 逆时针
默认旋转中心是元素中心点
3、 2D转换中心点 transform-origin
transform-origin:x y;
x y默认中心点是元素的中心点
4、 2D转换之缩放scale
transform:scale(x,y);
可以只写一个参数 表示x y都缩放该比例，可以设置中心点缩放
简写的时要考虑位移放到最前
5、动画常用属性
@keyframes 规定动画
animation 动画属性简写
animation-name 动画名称
animation-duration 规定动画一个周期所花费的时间
animation-timing-function 规定动画的速度曲线
animation-delay 规定动画的开始时间 延迟
animation-iteration-count 规定动画被播放的次数 默认是1 infinite 循环
animation-direction 规定动画是否在下一周期逆向播放xunhua
animation-play-state 规定动画是否正在运行或者暂停 默认running 暂停 pause
animation-fill-mode 规定动画结束后状态 也就是位置 保持forwords 起始状态 backwards、
6、3D移动translate3d
transform:translateX(n)
transform:translateY(n)
transform:translateZ(n)
7、透视 perspective
在2d平面产生远小近大的视觉立体 单位是像素
透视写在被观察元素的父盒子上面的元素
8、3d旋转rotate3d
transform：rotate3d
9、3D呈现transform-style 控制子元素是否开启三维立体环境
默认flat 不开启
transform-style：preserve-3d 开启立体空间
代码写给父级
10、过渡 transition
transition all 过渡时间

flex布局

1、通过给父盒子加flex属性 控制子盒子的位置和排列方式‘
flex-direction 设置主轴方向
row 默认从左到右
row-reserve 右到左
column 上到下
column-reserve 下到上
2、justify-content设置主轴上子元素的排列方式
flex-start 默认从头部开始如果主轴是x轴 则从左到右
flex-end 从尾部开始排列
center在主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间
3、align-items 设置侧轴上的子元素排列方式
flex-start 默认值 从上到下
flex-end 下到上
center 垂直居中
strech 拉伸
align-self控制子项自己在侧轴上的排列方式
order属性定义项目的排列顺序
数值越小 排列越靠前 默认为0