过渡 transition

我们可以不使用 flash 动画 或者js的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

过渡 ： 是从一个状态 渐渐的过渡到另一个状态

谁做过渡给谁加

单个属性 进行过渡

多个属性过渡 ，用逗号隔开

所有的属性都 进行变化 ，写 all

转换 transform

可以实现 元素的位移、旋转、缩放等效果

• 移动 ： translate
• 旋转 ： rotate
• 缩放 ： scale

2D 转换

2D ： 二维坐标系

translate 移动

1、translate 优点 ： 不会影响其他元素的位置 ；也就是说 ，当上面移动时。下面不会改变
 
2、translate 的百分比单位是 **相对于自身元素的50%**

3、**对行内标签没有效果**

1、移动

用 逗号隔开

2、只移动x轴

3、只移动y轴

盒子 水平垂直居中

1、想要son盒子在father正中间 ，可以使用定位 ，left 50% top50%

2、不过这样的话 ，子盒子多走了自身高度的一半，所以我们可以利用 transform

---

rotate 旋转

单位 ： deg ； 正：顺时针 ， 负 ： 逆时针

如果我们想要动起来，那么可以添加移动

这个就是 鼠标放上去，就旋转360度

设置转换中心点 transform-origin

1、后面的参数是 x 和 y是用空格隔开

2、x y 默认转换的中心点是元素的中心点(50% 50%)

3、还可以设置 px 或者 方位名词

1、跟方位名词

2、默认是 50% 50% 也就是 center center

3、可以是px像素

scale

1、1倍就是不变

2、等比例缩放 ， 同时修改宽度和高度，简单写法

3、可以进行缩放 ，小于1就是缩放的意思

4、优势 ： 不会影响其他盒子，且可以设置缩放的中心点

若 设置scale下面还有盒子，它不会影响其他盒子 ，还可以使用 transform-origin 设置中心点