携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十二天，点击查看活动详情
空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
- 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
- 空间转换也叫3D转换
- 属性：transform
- 语法
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
- 取值（正负均可）
- 像素单位数值
- 百分比
透视
目标：使用perspective属性实现透视效果
-
属性（添加给父级）
-
perspective: 值;
-
取值：像素单位数值， 数值一般在800 – 1200。
-
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
-
-
作用
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果
空间旋转
目标：使用rotate实现元素空间旋转效果
- 语法
- transform: rotateZ(值);
- transform: rotateX(值);
- transform: rotateY(值);
- 左手法则
- 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
- 拓展
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
- x，y，z 取值为0-1之间的数字
立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
perspective只增加近大远小、近实远虚的视觉效果
- 实现方法
- 添加 transform-style: preserve-3d;
- 使子元素处于真正的3d空间
- 呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d；
- 按需求设置子盒子的位置（位移或旋转）
- 注意
- 空间内，转换元素都有自已独立的坐标轴，互不干扰
空间缩放
目标：使用scale实现空间缩放效果
- 语法
- transform: scaleX(倍数);
- transform: scaleY(倍数);
- transform: scaleZ(倍数);
- transform: scale3d(x, y, z);
动画
目标：使用animation添加动画效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
- 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
- 构成动画的最小单元：帧或动画帧 实现步骤：
- 定义动画
- 使用动画
- 注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
