33-transform-style:preserve-3D；(3D转换)，动画animation

transform属性不止能实现2D转换，也可以制作3D立体效果

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

 1.perspective属性实现透视效果。

属性：（添加给父级）perspective：值；透视也叫视距，人眼睛到屏幕的距离。

取值：像素单位值，数值一般在800-1200px（透视和3D没有关系，只是为了看Z轴）

 2.transform-style元素属性值

值	含义
flat	默认值，指定子元素位于此元素所在2D平面内
preserve-3D	指定子元素在3D空间内

3.使用 盒子父元素添加transform-style: preserve-3d;呈现立体图形

4.平移translate

（取值为正负数均可，像素单位值px，百分比%）

• transform: translateX(值);
• transform: translateY(值);
• transform: translateZ(值);
• 复合写法：transform: translate3d(x, y, z);

5.缩放scale

• transform: scaleX(倍数);
• transform: scaleY(倍数);
• transform: scaleZ(倍数);（scaleZ可以理解为面向自己的方向在进行放大,需要把盒子进行旋转）
• 复合写法：transform: scale3d(x, y, z);（连写 transform: scale3d(X,Y,Z);值为倍数） 

6.旋转rotate

• transform: rotateZ(值);
• transform: rotateX(值);
• transform: rotateY(值);
• 复合写法：rotate3d(x, y, z, 角度度数) ;x，y，z 取值为0和1，0表示不围绕坐标轴旋转,1表示围绕坐标轴旋转

• animation-name：设置需要绑定到元素的动画名称；
• animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
• animation-timing-function：设置动画的速度曲线，默认为 ease；
• animation-delay：设置动画开始之前的延迟时间，默认为 0；
• animation-iteration-count：设置动画被播放的次数，默认为 1；
• animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
• animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
• animation-play-state：设置动画是正在运行还是暂停，默认是 running；
• animation：所有动画属性的简写属性。

7.1动画名称animation-name

值	描述
name	要绑定到html元素当中的动画名称，可以绑定多个动画，动画名称城之间用逗号分隔
none	表示没有动画效果

想要动画播放成功，动画名称和动画时长 必须赋值，也就是必须要定义 animation-name 和 animation-duration 属性。

7.2动画时长animation-duration，单位为秒或者毫秒

7.3速度曲线animation-timing-function

值	描述
linear	始终以相同的速度来完成整个过渡过程
ease	慢-快-慢
ease-in	以慢速开始
ease-out	以慢速结束
ease-in-out	以慢开始，并且以慢结束
cubic-bazier（n,n,n,n）	使用cubic-bezier（）函数来自定义自己的值，每个参数的取值范围在0到1之间

7.4延迟时间animation-delay属性用来定义动画开始播放前的延迟时间，单位为秒或者毫秒

animation-delay: time;

参数 time 就是动画播放前的延迟时间，参数 time 既可以为正值也可以为负值。参数值为正时，表示延迟指定时间开始播放；参数为负时，表示跳过指定时间，并立即播放动画 

7.5重复次数animation-iteration-count 属性用来定义动画播放的次数

值	描述
一个数字	使用具体数值定义动画播放次数，默认值为1
infinite	表示动画无限次播放

7.6动画方向animation-direction用来设置是否轮流反向播放动画

值	描述
normal	以正常的方式播放动画
reverse	以相反的方向播放动画
alternate	播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放
alternate-reverse	播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放

7.7animation-fill-mode设置当动画不播放时（动画播放完或延迟播放时）的状态

值	描述
none	不改变动画的默认行为
forwards	当动画播放完成之后，保持动画最后一个关键帧的样式
backwards	在animation-delay所指定的时间段内，应用动画第一个关键帧中的样式
both	同时遵循forwards和backwards的规则

7.8执行完毕时的状态animation-play-state属性用来设置动画是播放还是暂停

值	描述
paused	暂停动画的播放
running	正常播放动画

animation复合写法

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

每个参数分别对应上面介绍的各个属性，如果省略其中的某个或多个值，则将使用该属性对应的默认值