1空间的转换

1.分类

1.空间位移

2.空间旋转

3.空间缩放

2.空间位移transform：translate3D

1.解析定义

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

空间转换也叫3D转换

2.语法使用和取值

2.1语法

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

2.2取值（正负均可）

像素单位数值

百分比

2.注意translateZ使用的步骤

1.要看到translateZ的变化效果需要perspective属性开启透视效果

2.属性（添加在父元素）

perspective: 值;

取值：像素单位数值， 数值一般在800 – 1200。

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

3.作用

空间转换时，为元素添加近大远小、近实远虚的视觉效果

3.空间旋转 rotate3D

1.语法规范

transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值)；

连写属性 transform：rotate3D（值）

2.左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

3.拓展知识

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

例如

4.立体呈现transform-style: preserve-3d

1.含义

父元素添加transform-style: preserve-3d属性能使子元素处于真正的3D空间状态

2.实现步骤

1.盒子父元素添加transform-style: preserve-3d；

2.按需求设置子盒子的位置（位移或旋转）

3.注意事项 ，空间内，转换元素都有自已独立的坐标轴，互不干扰

4.空间缩放transfrom：scale3D（x，y，z）

1.语法

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

注意的是如果scaleZ数值大于1，那么立体前面到后面的距离会变长

5.动画的使用animation

1.动画的的作用

使元素在多个状态间的变化过程，过程可以控制，例如重复播放，最终画面，是否暂停等

2.本质是什么

动画的本质是快速切换大量的图片时脑海形成连续性的画面

构成动画的最小单元是：帧或者动画帧

3.动画的使用步骤

1.先定义动画书写如下

2.使用动画（在使用动画元素中添加）

3.注意事项

动画名称和动画时长是必须添加的

取值不分先后顺序

如出现两个时间值，第一个是动画时长，第二个是延迟时间

5.动画的具体属性

6.补充说明

1.使用动画属性中第二个数字值为延迟数值

2.如果想设置在延迟时间展示的画面时 需要添加backwards属性值

3.设置动画播放完毕停留在最后一帧时需要添加forwards属性值

4.如果想要backwards 和forwards两者同时存在需要添加both属性值

5动画的播放的方向 animation-direction

默认值 normal 先正再正 常用

alternate 先正再反 常用

reverse 先反再反

alternate-reverse 先反再正

6.设置走马灯轮播图需要注意的是，如果想要动画处于一直轮换，那么轮播图需要多添加最后一帧时父元素空缺的图片，如果父元素展示4张，那么需要额外加上4张图片在子元素盒子。

7.如果设置帧数动画的时候，需要注意stpes（精灵图里面动画单体的个数）