位移
实现居中的两种方法
绝对定位的盒子在父盒子中实现居中效果有两种方法
法一：margin
其中，left和top的值分别为子盒子自身宽高的一半
法二：translate
实现过渡效果
translate常常配合hover和transition使用，以实现鼠标悬停时过渡的动画效果
代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>位移-基本使用</title><style>.father {width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son {width: 200px;height: 100px;background-color: pink;transition: all 0.5s;}/* 鼠标移入到父盒子，son改变位置 */.father:hover .son {/* transform: translate(100px, 50px); *//* 百分比: 盒子自身尺寸的百分比 *//* transform: translate(100%, 50%); *//* transform: translate(-100%, 50%); *//* 只给出一个值表示x轴移动距离 *//* transform: translate(100px); */transform: translateY(100px);}</style>
</head><body><div class="father"><div class="son"></div></div>
</body></html>代码效果
鼠标进入黑框，粉色方块在0.5秒内下移100px，鼠标离开黑框，粉色方块在0.5秒内上移100px
代码解释
transition: all 0.5s; -> 拥有该属性的标签，在样式改变时，将在设定的时间内逐渐过渡到另一个样式
旋转
单位是deg，即“度”，一周是360deg
转换原点
被添加旋转属性的元素，默认旋转轴是元素的中心轴，可通过transform-origin来改变旋转轴
缩放
多重转换
translate、rotate、scale写成transform复合属性时可以同时实现位移、缩放、旋转效果
注意
旋转会改变网页元素的坐标轴向，所以在复合属性中，最后再写旋转！
如果在一个选择器中出现多个transform属性，写在下面的会覆盖写在上面的，导致上面的属性不生效，所以需要写成符合属性！
