一，2D转换（变换）transfrom

1. 2D移动 translate

属性值 translate(x,y) x正值向右移动 y正值向下移动

div{
    transfrom:translate(50px,50px);
}

小结：

1. translate 中的百分比单位是相对于自身元素的 translate:(50%,50%);
2. translate 类似定位，不会影响到其他元素的位置
3. 对行内标签没有效果

2. 2D旋转 rotate

属性值为 rotate(角度) 如 transform :rotate(30 deg) 顺时针方向旋转30度

div{
    transfrom:rotate(0deg);
}

3. 转换中心 transfrom-origin 了解

1. transform-origin :50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
2. transform-origin :top left; 左上角 和 transform-origin：0 0;相同
3. transform-origin :50px 50px; 距离左上角 50px 50px 的位置
4. transform-origin ：0; 只写一个值的时候 第二个值默认为 50%;

总结：设置旋转的中心，可以跟方位名词，也可以写具体的像素值。

4. 2D 缩放 scale

属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform :scale(2,3)

div{
    transfrom:scale(2,3);
}

小结：

1. transform :scale (1,1) 放大一倍 相对于没有放大

2. transform :scale (2,2) 宽和高都放大了2倍

3. transform :scale (2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)

4. transform :scale(0.5,0.5) 缩小

5. transform :scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解

当我们同时有位移和其他属性时，我们需要把位移放到最前面。

二， 动画 animation

注意：动画和过渡的区别

    过渡 只能看到一次变化过程     动画  可以设置变化次数   甚至是无数次

2.1 步骤

/* 1 声明动画函数 */
@keyframes move{
    0%{
        width:100px;
        background-color:skyblue;
    }
    50%{
        width:100px;
        background-color:skyblue;
    }  
    100%{
        width:100px;
        background-color:skyblue;
    }  
}

div{
    width:200px;
    height:200px;
    background-color:green;
    margin:100px auto;
    /* 设置动画名*/
    animation-name:move;
    /* 设置动画播放的持续时间*/
    animation-duration:2s;
}

@keyframes 里面可以放任何css样式

2.2 语法

2.2.1 动画名字

设置要使用的动画名 animation-name: xxx;

2.2.2 持续时间

设置动画播放的持续时间 animation-duration: 3s ;

2.2.3 速度曲线

和设置过渡的曲线一样 animation-timiing-function：linear;

• linear： 匀速
• steps() :指定了时间函数中的间隔数量（步数）
• ease： 慢-快-慢 默认值
• ease-in： 慢-快。
• ease-out： 快-慢。
• ease-in-out： 慢-快-慢。

2.2.4 延迟时间

animation-delay ：0s ;（鼠标放上去何时开始）

2.2.5 循环次数

设置动画播放的循环次数 animation-iteration-count: infinite;

infinite 为无限循环

2.2.6 循环方向

animation-direction （默认是normal）

在动画中定义循环方向的属性值为 ：

1. normal 默认值
2. reverse 反向运行
3. alternate 正-反-正 （让动画走出去，然后再走回来，逆播放）
4. alternate-reverse
5. 以上与循环次数有关

2.2.7 动画等待或者结束的状态

animation-fifill-mode 设置动画在等待或者结束的时候的状态

forwards：动画结束后，元素样式停留在 100% 的样式

backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式

both： 同时设置了 forwards和backwards两个属性值

2.2.8 暂停和播放

animation-play-state 控制 （鼠标放上去）播放 还是 暂停

running 播放 paused 暂停

2.3 animation 的复合写法

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

/*animation: 动画名字 持续时间 规定动画的运动状态 规定动画何时开始    */

简写属性里面不包含 animation-play-state

想要动画走回来，而不是直接跳回来：animation-derection：alternate

三，3D 转换

3.1 三维坐标系

• x轴 水平向右
• y轴 垂直向下
• z轴 垂直屏幕 由屏幕里面指向屏幕的外面

3.2 3d移动 translate3d

语法：

1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
2. translform:translateX(100px) 仅仅是移动在x轴上移动
3. translform:translateY(100px) 仅仅是移动在Y轴上移动
4. translform:translateZ(100px) 仅仅是移动在Z轴上移动
   注意：Z轴是垂直屏幕，由里指向外面 ，默认看不到元素在z轴的方向上移动，需要加上视距

3.3 视距 perspertive

• 设置人和物体的距离—视距 这个值是给物体的父元素
• 动态改变物体的 translateZ 即可观察效果

 /* 父元素 */
    body {
      /* 视距 */
      perspective: 1000px;
    }

    /* 目标 */
    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* z轴的移动 */
      transform: translateZ(0px);
    }

四，3D的旋转 rotate3d

4.1 左手准则

比如要判断某元素沿着x轴是怎么旋转的

1. 左手的手拇指指向 x轴的正方向
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

4.2 语法

1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度

五，3D的缩放 scale3d

3d缩放 可以控制元素 在 x轴，y轴，z轴上的缩放，也可以理解为 宽，高，厚度的缩放

5.1 语法

1. transform: scale3d(1 ,1,2); 宽，高 缩放一倍，厚度放大两倍
2. transform: scaleX(1) 只缩放宽
3. transform: scaleY(1) 只缩放高
4. transform: scaleZ(1) 只缩放厚

六，视距原点 perspective-origin

1. 视距原点和视距一样，也是设置给要观察元素的父元素上
2. perspective-origin:center center; 默认值是元素的中心点
3. perspective-origin:10px； 指定了一个参数的时候，第二个参数默认为center 也就是50%；
4. perspective-origin:10% %； 百分比都是相对于自身的宽度和高度

七，转换样式 transform-style

/* 开启3维立体环境 */
transform-style: preserve-3d;