transform 全解
一、四个常用功能
位移：translate
缩放：scale
旋转：rotate
倾斜：skew
1. 位移 translate
向 X 轴方向移动：translateX()
.demo{
transform:translateX(6px);
}
向 Y 轴方向移动：translateY()
.demo{
transform:translateY(50%);
/* 向Y方向移动(自身的width和height属性)50% */
}
向 Z 轴方向移动(必须配合一个视点（三维中的原点）): translateZ()
.father {
perspective:1000px;
/*垂直屏幕正中心向里1000px*/
}
.demo {
transform:translateZ(50px);
/* 这个就是近大远小的原理了 */
}
缩写语法
transform:translate(x,y
)
transform:translate3d(x,y,z
)
案例 ： 绝对元素的居中
left:50%;
top:50%;
transform:translate(-50%,-50%);
2、缩放 scale：用的少，容易出现模糊
X 方向缩放：scaleX()
.demo {
transform:scaleX(1.5);
/* X 方向变为原来的1.5倍 */
}
Y 方向缩放：scaleY()
.demo {
transform:scaleX(1.2);
/* Y 方向变为原来的1.2倍 */
}
缩写语法
transform: scale(x, y
);
3、旋转 rotate:一般用于 360 旋转制作 loading
以 Z 轴为轴旋转（默认）: rotate() | rotateZ() .demo {
transform:rotateZ(45deg) | rotate(45deg);
}
以 X 轴为轴旋转: rotateX() .demo {
transform:rotateX(45deg);
}
以 Y 轴为轴旋转: rotateY() .demo {
transform:rotateY(45deg);
}
4、倾斜 skew:用的较少
向 X 轴倾斜: skewX().demo {
transform:skewX(15deg);
}
向 Y 轴倾斜: skewY().demo {
transform:skewY(15deg);
}
二、transform 组合效果
.demo {
transform:scale(1.5),rotate(45deg);
}
.demo1{
transform:none; //取消所有样式
}
三、使用说明
一般需要配合transition过渡
inline 元素不支持transform,必须先display:block
