空间转移
transform: translateX() x轴水平向右是正值，水平向左是负值
transform: translateY() y轴垂直向下是正值，垂直向上是负值
transform:translateZ() z轴垂直屏幕向内是负值，垂直屏幕向外是正值
transform:translate3d(x,y,z)
透视、景深、视距
perspective 600px-1200px
给父元素添加实现一个近大远小的效果
空间旋转
围绕X轴旋转 transform:rotateX(deg)
围绕y轴旋转 transform:rotateY()
围绕Z轴旋转 transform:rotateZ()
左手定则 ：左手的大拇指指向轴线的正值方向，四指弯曲的方向即为正值旋转的方向
了解
-
自定义轴旋转 transform:rotate3d(x,y,z旋转的角度)
-
同时在两条轴线上旋转
- transform:rotateX() rotateY();
- 3d导航的时候给我们提供了一个上帝视角
3d呈现
transform-style
-
flat
- 平面
- 默认值
-
preserve-3d 开启3d环境
动画
定义动画
- @keyframes 动画名称{ frome{} to{} }
- @keyframes动画名称{
0%{}
50%{}
100%{} }
调用动画
-
animation:动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置
-
速度曲线
-
ease
-
linear 均速
-
steps() 逐帧动画
-
次数 infinite 无限次
-
反向播放 alternate
-
停留结束位置 forwards
-
暂停动画 animation-play-state:paused;
-
动画延迟 animation-delay
-
