H5C3—2D转换

H5C3—2D转换

一、2D转换（变换）transform

1.2D转换（变换）transform

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。

• 缩放：scale
• 移动：translate
• 旋转：rotate
• 倾斜：skew （不介绍，感兴趣自己看：https://blog.csdn.net/alwayssmlilewpc/article/details/79890004）
  2D转换是改变标签在2维平面上的位置和形状的一种技术。

2.2维坐标系

2维坐标系其实就是指布局的时候的坐标系，如图

3.2d移动 translate

2d移动是2d转换里的一种功能，可以改变元素在页面中的位置，类似定位
使用2d移动的步骤：
（1）给元素添加转换属性 transform
（2）属性值为translate（x,y）
分开写：transform:translateX（x）;
transform:translateY(y);

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

4.2d旋转rotate

（1）rotate 介绍
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
（2）使用步骤：
1）给元素添加转换属性transform
2）属性值为rotate（角度）deg(单位)
3）如 transform:rotate(30deg) 顺时针方向旋转30度
4）代码：

 div{
      transform: rotate(0deg);
      // rotate：旋转
      // deg：degree：度
     }

在浏览器中手动修改rotate的效果

5）观察过后，2d旋转有以下特点：
①角度为正时 顺时针， 负时 为逆时针
②默认旋转的中心点是元素的中心点
③ 注意：这个其实也没有动画过程，我们在演示的时候，是在浏览器中手动修改了rotate这个值，角度一直改变，才出现上图旋转效果
④补充：transform: rotate(.5turn); turn 也是单位代表圈

5.转换中心 transform-origin（了解）

该属性可以修改元素旋转的中心点
origin：原点，如果与rotate旋转配合使用，就是旋转的中心点。 如果与scale配合使用，就是缩放的基准点。

（1）语法：
transform-origin：x y;
（2）注意：
注意后面的参数x和y用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）
（3）常见写法：
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%;

6.2d缩放scale

（1）scale介绍
缩放，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小
（2）语法：
transform：scale（x,y);
（3）步骤：
1）给元素添加转换属性transform
2）转换的属性值为scale（宽的倍数，高的倍数）
3）如宽变为2倍，高变为3倍 transform:scale（2,3）
4）代码：

  div{
       transform:scale(2,3);
       //scale：比例的意思，理解为按照比例缩放。
      }

（4）分析图：

（5）注意：

• 注意其中的x和y用逗号分隔
• transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
• transform:scale(2,2) ：宽和高都放大了2倍
• transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
• transform:scale(0.5,0.5)：缩小
• sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子（相对于修改宽高而言：宽高修改之后会影响其他盒子）

7.综合写法

（1）同时使用多个转换，
格式为：transform:transform: translate() rotate() scale() …等（空格隔开多个转换）
（2）其顺序会影转换的效果。（先旋转会改变坐标轴方向）
1）transform: translate(150px, 50px) rotate(180deg); 这个会在向右向下位移过程中进行旋转。
2）transform: rotate(180deg) translate(150px, 50px); 这个会先旋转，旋转之后坐标轴方向颠倒了，然后他就会向左向上位移了。
（3）所以 当我们同时有位移和其他属性的时候，记得要将位移放到最前。先移动后旋转

8.总结

（1）转换transform 我们简单理解就是变形 有2D 和 3D 之分
（2）位移(translate) 旋转(rotate) 和 缩放(scale)
（3）2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的
（4）可以分开写比如 translateX(x) 和 translateY(y)
（5）2D 旋转 rotate(度数)可以实现旋转 元素度数的单位是deg
（6）2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
（7）设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
（8）进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

二、动画 animation

动画（animation）是CSS3中具有颠覆性的特征之一，

• 可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

• 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

• 初学者容易对 动画 和 过渡 傻傻分不清楚

• 过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px

• 动画 可以设置变化的次数 甚至是无数次

2.1.步骤

制作动画分为两步：
1.在css中定义动画函数
2.给目标元素调用动画函数

代码如下：

 /* 1 声明动画函数  */
    @keyframes ani_div {
      0%{
        width: 100px;
        background-color: red;
      }
      50%{
        width: 150px;
        background-color: green;
      }
      100%{
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
    }
/*keyframes关键帧，理解，定义动画就是定义动画过程中的几个关键帧，然后根据关键帧依次变化*/

    div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* 2 调用动画 */
      animation-name: ani_div;
      /* 持续时间 */
      animation-duration: 2s;
    }

动画序列：

• 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
• 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
• 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%

总结：
keyframes：关键帧，理解，定义动画就是定义动画过程中的几个关键帧，然后根据关键帧依次变化。

2.2.语法：

动画常用属性：

1.动画名：
设置要使用的动画名 animation-name:xxx;
2.持续时间
设置动画播放的持续时间 animation-duration:3s
3.速度曲线
和设置过渡的速度曲线一样 animation-timing-function:linear;
timing:定时 function:功能，作用 linear:匀速 （linear：线性的）
线性理解图：

线性理解为匀速，如何理解？ y=kx，比如k是速度，这个速度是固定的（匀速），那么x是时间，y就是距离。

属性：ease:慢-快-慢 默认值（ease:减缓，这里理解为变化，速度是变化的）
ease-in:慢-快 （ease-in:in,在…里面，进入）
ease-out： 快-慢（ease-out：out，在…外边，外部，离去）
ease-in-out： 慢-快-慢
4.延迟时间
animation-delay: 0s;
5.循环次数
设置动画播放的循环次数：animation-iteration-count: 2;
属性：
可以指定数字，也可以指定 infinite ，infinite为无限循环
interation：反复，循环
6.循环方向
animation-direction：direction：方向
如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为

（1）normal 默认值 红 -> 黑
（2）reverse 反向运行 黑 -> 红 （reverse：反向，逆向播放）
（3）alternate 正-反-正… 红 -> 黑 -> 红… （alternate：交替，轮流）
（4）alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
（5）以上与循环次数有关 （如果是交替，那么循环次数最少为2，才能来回交替一次）

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

动画结束之后默认是回到初始状态：backwards
（1）forwards：动画结束后，元素样式停留在 100% 的样式 （forwards：向前）
（2）backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式 （backwards：向后）
（3）both： 同时设置了 forwards和backwards两个属性值
理解：fill：装满，理解为填充。动画结束之后填充为什么状态，以什么状态停留

​ forwards，停留在100%，那就是向前不回头

​ backwards，停留在0%，动画执行完成是在100%，又回到0%初始位置，那就是向后回头了。

8.暂停和播放
animation-play-state 控制 播放 还是 暂停
（animation-play-state：动画播放状态）

running 播放 paused 暂停

2.3.复合写法（简写）

动画简写语法：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;

• 前边两个属性必须要写，后边的可以省略
• 简写属性里面不包含 animation-play-state
• 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
• 想要动画走回来 ，而不是直接跳回来：animation-direction：alternate
• 盒子动画结束后，停在结束位置： animation-fill-mode：forwards

2.4.多个动画写法

用逗号分隔
animation: name duration timing-function delay iteration-count direction fill-mode,name duration timing-function delay iteration-count direction fill-mode;

2.5.动画结束事件animationend

元素在动画结束之后，会自动触发的事件 animationend
var div = document.querySelector(“div”);
div.addEventListener(“animationend”, function () {
console.log(“div的动画结束之后，触发”);
})

2.6.速度曲线细节

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

三、动画库animate.css

封装了常见的有意思的小动画 发疯似的建议看官网来学习使用
官网
中文

3.1.使用步骤

1.引入css文件

  <head>
  <link rel="stylesheet" href="animate.min.css">
  </head>

2.给元素添加对应的class

<h1 class="animated infinite bounce">快来看看我</h1>

简单解读：
animated 必须添加的class
infinite 无限播放
bounce 弹跳动画的效果，可以查官网自己选择喜欢的

3.2.css3兼容处理

css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做以下处理
添加对应的浏览器的前缀 常见前缀如下：

• 谷歌 -webkit
• 火狐 -moz
• IE -ms
  如对 border-radius 进行兼容性处理
  -webkit-border-radius: 30px 10px;
  -moz-border-radius: 30px 10px;
  -ms-border-radius: 30px 10px;
  // border-radius 一定要放在最后
  border-radius: 30px 10px;
  如果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性