动画，平面转换，空间转换

平面转换

改变盒子在平面内的形态（位移，旋转，缩放）

2D转换

属性:transform

位移

transform：translate(水平移动距离，垂直移动距离)
取值：
  像素单位数值
  百分比(参照盒子自身的尺寸)
  
x轴正向为右，y轴正向为下

translate()  只给出一个值  表示x轴移动的距离
单独设置某个方向移动的距离   translateX()   translateY()

位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
 
width:200px;
height:100px;

旋转

transform:rotate(角度)
角度单位是 deg

取值 
正 顺时针旋转
负 逆时针旋转

transform-origin

改变转换原点

默认原点是盒子中心点

transform-origin:原点水平位置 原点垂直位置
取值：
 方位名词:(left   top  bottom center  right)
 像素单位数值
 百分比(参照盒子自身尺寸)

多重转换

 transform: translate(600px) rotate(360deg);

原理

• 旋转会改变坐标轴方向
• 先写旋转，后面的转换效果的轴以转换后的轴为准，影响到转换结果

缩放

语法

transform:scale(倍数)
transform:scale(x轴倍数，y轴倍数)
一般情况下scale 设置一个值，表示x轴和y轴是等比例缩放
scale值大于1 表示放大， 小于1 表示缩小

渐变背景

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.5)
            );

空间转换

X,Y,Z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

空间转换 也叫3D转换

transform

空间位移

transform: translate3d(x,y,z); 
            transform: translateX(100px);
            transform:translateY(100px);
            远离眼睛方向 负值  
            对着眼睛方向 正值
            transform: translateZ(-100px);
            
取值:
  正负都可以
  像素单位数值
  百分比

透视

z轴是视线方向，移动效果是距离的远或近，电脑屏幕是平面的，无法观察远近效果

perspective 实现透视效果

perspective  添加给父级
perspective:值
取值：像素单位数值， 数值一般在800px-1200px
作用：空间转换时，为元素添加近大远小，近实远虚的视觉效果

透视距离也叫视距，就是人的眼睛到屏幕的距离

空间旋转

/* transform: rotateZ(360deg); */

            /* transform: rotateX(60deg);
            transform: rotateX(-60deg); */

            transform: rotateY(60deg);
            transform: rotateY(-60deg);

立体呈现

transform-style:preserve-3d
使子元素处于真正的3d空间

左手法则

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

动画

animation添加动画效果

多个状态之间的变化过程，动画过程可控(重复播放，最终画面，是否暂停)

动画实现步骤

1：定义动画
/* 1:定义动画 
       @keyframes 动画名称{
           from {}
           to {}
       }
       */
       
       @keyframes change {
           from {
               width: 200px;
           }
           to {
               width: 600px;
           }
       }

2：使用动画

/* 2 使用动画 */
           /* animation: 动画名称 动画花费时长; */
           animation: change 2s;

动画属性

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了 animation-play-state属性
animation-name	制定需要使用的动画（ 必须的 ）
animation-duration	规定动画完成一个周期所花费的秒或毫秒( 必须的 )
animation-timing-function	规定动画的速度曲线，默认是"ease"”。
aniamtion-delay	规定动画何时开始，默认是0.
animation-iteration-count	规定动画被播放的次数，默认是1,还有 infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是" normal" alternate逆播放
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards
animation-play-state	规定动画是否正在运行或暂停。默认是" running" 还有’ paused 暂停.

• 暂停动画： animation-play-state: pulsed;经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来： animation- direction: alternate
• 盒子动画结束后，停在结東位置： animation- fill-mode: forwards

动画名称 动画时长 必须赋值
赋值不分前后顺序
如果有2个时间值，第一个时间表示动画时长，第二个表示动画延迟时间

aniamtion-direction----动画是否逆向播放

aniamtion-direction: norma | reverse | alternate | alternate-reverse

• normal 默认的

• reverse 从终点运动向起点 终点=>起点

• alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效

• alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效

animation-fill-mode----动画结束后状态

• aniamtion-fill-mode:forwards | backwards

  • forwards 保持当前位置
  • backwards 回到初始位置

animation-timing- function:规定动画的速度曲线（默认是 ease）

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低東开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps	指定了时间函数中的间隔数量（步长）