|
一、css3过渡属性
transition: 要过渡的属性 花费时间 运动曲线 何时开始
1.要过渡的属性：例如宽度width，高度height等，如果全部属性需要过渡，则填all
2.花费时间：比如1s 2ms
3.运动曲线：默认ease（先快后慢） 匀速linear
4.何时开始：即滞后时间
二、css3动画
1.动画的定义
@keyframes move{
0%{这里填你此时的样式}
50%{}
100%{}
}
//keyframes意思为关键帧，这个定义了你在0%，50%，100%分别是什么样式
//根据需要你可以将动画分解成任意分段，比如0%，5%，45%，100%
2.动画的调用
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始or结束状态
三、2D转换
transform: translate() rotate() scale() (其他的...);
//translate(x,y) 位移 ----->x
//rotate() 旋转 |
//scale(x,y) 缩放 ↓
y
四、3D转换
位移 旋转 缩放等 基本同2D一样，后面加上3D，坐标轴变为x,y,z
比如 rotate3d(x,y,z)
x,y轴方向同3D，z轴正方向：垂直屏幕朝外
新属性
perspective 透视，可以设置虚拟观察点的位置
transform-style: preserve-3d;
//写给父级，使子元素开启立体空间，默认flat。
//可以在操作父元素时保持子元素里的3d效果
|