目录
平面转换transform(2D转换)
CSS3 过渡（重点）
平面转换-平移
平移实现居中效果
平移转换-旋转
平面多重转换
旋转-改变转换原点
平移转换-缩放
平移转换-倾斜
平面转换transform(2D转换)
作用：给元素添加动态效果，一般和过渡配合使用
概念：改变盒子在平面内的状态(位移，旋转，缩放，倾斜)
transform适用于：所有块级元素及某些内联元素
CSS3 过渡（重点）
transition:要过渡的属性 花费时间 运动曲线 何时开始;
平面转换-平移
transform:translate(x轴移动距离，y轴移动的距离)取值：1.像素单位数值
2.百分比(参照盒子自身尺寸计算结果)
3.正负均可
注意：
translate()只写一个值时，表示沿着x轴移动
单独设置x或y轴移动距离，translateX 或translateY
平移实现居中效果
方法一：
position: absolute;
left: 50%;
top: 50%;
/* margin */
margin-left: -100px;
margin-top: -50px;方法二：百分比参照盒子自身尺寸计算结果
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);平移转换-旋转
transform:rotate(旋转角度)/* 顺时针 */
transform: rotate(360deg);
/* 逆时针 */
transform: rotate(-180deg);平面多重转换
transform: translate(800px) rotate(360deg) scale(2);
/* 鼠标移入box 图片边走边移 */
.box:hover img{
/* 先平移再旋转 */
transform: translate(700px) rotate(360deg);
/* 旋转会改变坐标轴向
多重转换：以第一种转换形态的坐标轴为准
*/
transform: rotate(360deg) translate(700px);
}旋转-改变转换原点
默认情况下，转换原点是盒子中心的
transform-origin:水平原点位置 垂直原点位置
取值： 方位名词(left,top,right,bottom,center)
像素单位数值
百分比
语法：
transform-origin: 方位词 方位词;
transform-origin: 具体像素位置 具体像素位置;
transform-origin: 百分比 百分比;img {
width: 200px;
border: 1px solid;
margin: 100px 300px;
transition: all 3s;
transform-origin: left bottom;
transform-origin: 50px 70px;
transform-origin: 20% 30%;
}
img:hover {
/* 顺时针 */
transform: rotate(360deg);
/* 逆时针 */
transform: rotate(-180deg);
}平移转换-缩放
语法：
transform:scale(缩放倍数)
transform:scale(x轴缩放倍数，y轴缩放倍数)注意：通常只为scale设置一个值，表示x轴和y轴等比例缩放
取值大于1 放大 取值小于1 缩小
.box:hover img{
/* 使用宽高改变 从左上角开始 */
/* width: 500px;
height: 500px; */
transform: scale(2);
/* transform: scale(0.5); */
/* transform: scale(1); */
}平移转换-倾斜
语法：
transform: skew(倾斜度数);div:hover{
/* 正值向左倾斜 */
transform: skew(30deg);
/* 负值向左倾斜 */
transform: skew(-30deg);
}
