空间位移
3D位移
-
transform:translateX(数字+像素)
-
transform:translateY(数字+像素)
-
transform:translateZ(数字+像素)
-
左手定则
- 大拇指的指向方向的正值，手指弯曲的方向代表的是位移的方向
透视
- prespective
- 该属性一般添加给父元素，（页面body）
- 取值范围：一般在600-1200px
- 作用：可以在空间转换的时候，给元素达到一个近大远小，近实远虚的视觉效果。
3d旋转
-
transform:rotateX(数字+deg)
- 沿着X轴进行旋转角度，正负值均可
-
transform:rotateY(数字+deg)
- 沿着Y轴进行旋转角度，正负值均可
-
transform:rotateZ(数字+deg)
- 沿着Z轴进行旋转角度，正负值均可
-
左手定则
- 大拇指的指向方向的正值，手指弯曲的方向代表的是旋转的方向
3d环境（上帝视角，景深，视距）
-
transform-style：preserve-3d
- flat
- 默认值，就是一个平面的2D效果
-
能够让子元素在一个原来的2d环境转换成3d的环境效果
-
案例实现：翻转导航
空间缩放
- transform：scaleX（倍数）
- transform：scaleY（倍数）
- transform：scaleZ（倍数）
- transform：scale3D（X,Y,Z）
- 案例实现：全民出游记的文字部分（先缩小，再放大，最后回归正常的一倍效果）
动画
定义动画
- @keyframs 动画名称{ from{} to{} }
- @keyframs 动画名称{ 0%{} 40%{} 80%{} 100%{} }
调用动画
-
animation：动画名称 动画执行时长 速度曲线 延迟时间 次数 方向播放 最后定格位置
-
开发中常使用的调用动画属性
- 延迟时间——animation-delay：
- 暂停动画——animation-play-state：paused 一般是配合hover悬停状态的时候使用。
- 常见应用场景：轮播图
逐帧动画
- 速度曲线
- animation-timing-function：steps（数字）
- 常见应用场景：行走的小人
XMind - Trial Version
