2d转换是改变标签在2维平面上的位置和形状的一种技术，先来学习2维坐标系
2维坐标系其实就是指布局的时候的坐标系 如图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M6waiHCD-1599180294601)(media/1524965494414.png)]
2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位
使用2d移动的步骤：
给元素添加 转换属性 transform属性值为 translate(x,y) 如 transform:translate(50px,50px); div{ transform: translate(50px,50px); }[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HreVahxO-1599180294604)(media/1524965782388.png)]
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
使用步骤：
给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); }在浏览器中手动修改 rotate
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TqQB2IYM-1599180294606)(media/4.gif)]
观察过后，2d旋转有以下特点
角度为正时 顺时针 负时 为逆时针默认旋转的中心点是元素的中心点该属性可以修改元素旋转的时候的中心点
transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度transform-origin:top left; 左上角 和 transform-origin：0 0;相同transform-origin:50px 50px; 距离左上角 50px 50px 的位置transform-origin：0; 只写一个值的时候 第二个值默认为 50%;缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小
步骤：
给元素添加转换属性 transform转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3) div{ transform:scale(2,3); }[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uuyadQK6-1599180294610)(media/1524966701225.png)]
初学者容易对 动画 和 过渡 傻傻分不清楚
过渡 只能看到一次变化过程 如 宽度 1000px 变化到 100px
动画 可以设置变化的次数 甚至是无数次
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UwlOo5XA-1599180294612)(media/1524985595597.png)]
/* 1 声明动画函数 */ @keyframes ani_div { 0%{ width: 100px; background-color: red; } 50%{ width: 150px; background-color: green; } 100%{ width: 300px; height: 300px; background-color: yellow; } } div { width: 200px; height: 200px; background-color: aqua; margin: 100px auto; /* 2 调用动画 */ animation-name: ani_div; /* 持续时间 */ animation-duration: 2s; }动画名
设置要使用的动画名 animation-name:xxx;
持续时间
设置动画播放的持续时间 animation-duration:3s
速度曲线
和设置过渡的速度曲线一样 animation-timing-function:linear;
linear： 匀速ease： 慢-快-慢 默认值ease-in： 慢-快。ease-out： 快-慢。ease-in-out： 慢-快-慢。延迟时间
animation-delay: 0s;
循环次数
设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环
循环方向
animation-direction
如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为
normal 默认值 红 -> 黑reverse 反向运行 黑 -> 红alternate 正-反-正… 红 -> 黑 -> 红…alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …以上与循环次数有关动画等待或者结束的状态
animation-fill-mode 设置动画在等待或者结束的时候的状态
forwards：动画结束后，元素样式停留在 100% 的样式backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式both： 同时设置了 forwards和backwards两个属性值暂停和播放
animation-play-state 控制 播放 还是 暂停
running 播放 paused 暂停
用逗号分隔
animation: name duration timing-function delay iteration-count direction fill-mode， animation: name duration timing-function delay iteration-count direction fill-mode;元素在动画结束之后，会自动触发的事件 animationend
var div = document.querySelector("div"); div.addEventListener("animationend", function () { console.log("div的动画结束之后，触发"); })封装了常见的有意思的小动画 发疯似的建议看官网来学习使用
官网
中文
引入css文件
<head> <link rel="stylesheet" href="animate.min.css"> </head>给元素添加对应的class
<h1 class="animated infinite bounce">快来看看我</h1>简单解读：
animated 必须添加的class
infinite 无限播放
bounce 弹跳动画的效果，可以查官网自己选择喜欢的
css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做以下处理
添加对应的浏览器的前缀 常见前缀如下
谷歌 -webkit火狐 -mozIE -ms如对 border-radius 进行兼容性处理
-webkit-border-radius: 30px 10px; -moz-border-radius: 30px 10px; -ms-border-radius: 30px 10px; // border-radius 一定要放在最后 border-radius: 30px 10px;应的浏览器的前缀 常见前缀如下
谷歌 -webkit火狐 -mozIE -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属性
