空间坐标系
- X轴：水平向右为正
- Y轴：垂直向下为正
- Z轴：朝屏幕外面为正
空间位移
- X轴：transform:translateX();
- Y轴：transform：translateY();
- Z轴：transform:translateZ();
- 综合写法：transform:translate3d(x,y,z);
空间旋转
- 绕X轴旋转：transform:rotateX(deg);
- 绕Y轴旋转：transform:rotateY(deg);
- 绕Z轴旋转：transform:rotateZ(deg);
- 自定义轴线：transform：rotate3d(x,y,z,deg)
透视、视距、景深
-
perspective
- 600px-1200px
-
设置透视可以看到盒子近大远小的效果
-
给父元素设置
开启3d视图
-
transform-style:flat
- 默认值，平面效果
-
transform-style:preserve-3d
- 3d效果
-
给父元素设置
-
配合 transform: rotateX() rotateY();可以开启上帝视角，方便看到子元素的旋转效果
动画
定义动画
-
关键词 ： @keyframes
-
格式
- @keyframes 动画名 { from {} to {}
}\
- @keyframes 动画名 { 0% {} 100% {} }
调用动画
- 关键词：animation
- animation: 动画名 动画执行时间 次数
速度曲线 延迟时间 反向播放 停留结束位置
-
次数
- infinite 无限次
-
速度曲线
-
linear
- 匀速
-
steps()
- 逐帧动画
-
linear 和 steps() 不能同时使用
-
-
动画延迟
- animation-delay
-
反向播放
- alternate
-
停留结束位置
- forwards
-
暂停动画
-
animation-play-state: paused;
- 配合鼠标悬停时使用
-
-
animation 同时出现两个时间参数，第一个是动画时间，第二个是延迟时间
作者：森林皮皮龙
链接：juejin.cn/post/704706…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
