3d转换
语法
-
transform:translate3d(x,y,z)
-
以x为轴
- transform:translateX()
-
以y为轴
- transform:translateY()
-
以z为轴
- transform:translateZ()
-
取值
- 像素
- 百分比
透视
-
perspective：
-
添加给父级，实现近大远小的视觉效果，不能呈现立体图形
-
取值
- 像素单位，400-1200
-
立体呈现
-
transform-style: preserve-3d
- 添加给父级
旋转
-
语法
- transform: rotateZ(值);
- transform: rotateX(值);
- transform: rotateY(值);
-
左手法则
- 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
-
空间旋转
- rotate3d(x, y, z, 角度度数)
- 取值0-1
动画
实现步骤
-
1，定义动画
-
@keyframes 动画名称 {}
- from{} to{}
- 0%{} 50%{} 100%{}
-
-
2，使用动画
- animation:动画名称 动画花费时长（必写的两项）速度曲线 延迟时间 重复次数 动画方向 执行完毕状态；
- animation-delay 延迟时间
- animation-play-stade：paused 暂停
逐帧动画
-
使用steps实现逐帧动画
- 1.设置盒子尺寸大小,背景图为当前精灵图
- 2.改变背景图的位置（移动的距离就是精灵图的宽度）
- 3.添加速度曲线steps(N)，N与精灵图上小图个数相同
- 4.添加无限重复效果
\
