空间转换
空间位移
- transform: translateX()【水平向右的方向为X的正值，反之为负值】
transform: translateY()【水平向下的方向为Y的正值，反之为负值（注意点：与数学的直角坐标系不同）】 -transform: translateZ()【屏幕往外的距离为Z的正值，屏幕往里的值为负值】transform: translate3d(x, y, z)
透视、景深、视距
-
perspective- 600px - 1200px【数值为推荐数值，不为必须数值】
-
给父元素添加 实现一个近大远小的效果【数值给父元素添加】
空间旋转
-
围绕x轴旋转
- transform: rotateX() -
围绕y轴旋转
- transform: rotateY() -
围绕z轴旋转
- transform: rotateY() -
左手定则
- 左手的大拇指指向轴线的正值方向，四指弯曲的方向即为正值旋转的方向
-
了解
-
自定义轴旋转
transform: rotate3d(x,y,z,旋转的角度)【注意：自定义旋转有四个数值】transform: rotateX() rotateY();【注意：两个属性值之间用空格】
-
同时在两条轴线上旋转
- 3d导航的时候 给我们提供了一个上帝视角
-
3d呈现
-
transform-style-
flat- 平面
- 默认值
-
preserve-3d- 开启3d环境
-
动画
定义动画
-
@keyframes 动画名称 {
from {}【动画起始（与0%的意义一样）】 to {} 【动画结束（与100%意义一样）】
}
-
@keyframes 动画名称 {
0% {} 50% {} 100% {}
}
调用动画
-
animation: 动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置
-
速度曲线
-
ease -
linear- 匀速
-
steps()- 逐帧动画【与速度曲线的属性值有冲突，注意】
-
-
次数
-
输入数字【代表播放几次】
-
infinite【动画播放一直重复播放】 -
反向播放
alternate【俗称倒放】
-
停留结束位置
forwards【固定在动画播放结束后的位置，不会使元素回归原来的样子】
-
暂停动画
animation-play-state: paused;【经常配合hover鼠标悬停，实现鼠标悬停的时候暂停。】
-
动画延迟
animation-delay【延时经常用于一个网页动画效果产生时差】
