2D转化:transform
translate(x,y):移动
rotate(度):旋转 单位deg
scale(x,y):伸缩 表示x huo y变化多少倍
设置转化中心点:transform-origin(x,y) x y可以为像素,也可以为方位名词
动画转化:
定义:
@keyframes 动画名词{
0%{
变化
}
100%{
变化
}
}
属性:
@keyframes 规定动画
animation-name 动画名称
animation-duration 持续时间
animation-timing-function 速度曲线 steps()设置步长
animation-delay 延迟开始时间
animation-iteration-count 动画次数 infinite 无限
animation-diretion 是否在下一周期逆向 normal alternate
animation-play-state 规定是否暂停, running pause
3D转化:
translate3D(x,y,z)
rotate3D(x,y,z)
perspective透视,体现z轴 写在被观察的父盒子上