css3 transform

transform的含义就是改变，使…变形，很好理解，这篇文章也是css3的第一篇，让我进入css3的大门，开始前进吧。这些改变全是以自身为参考的哈，改变么，就是自己的改变。
注：这里的x、y、z可以大写也可以小写，如：translatex(x) 和 translateX(x) 都可以。

移动（translate）

translate(x,y)：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。

translatex(x)：指定对象X轴（水平方向）的平移。

translatey(y)：指定对象Y轴（水平方向）的平移。

translate3d(x,y,z)：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴。

旋转（rotate）

rotate(angle)：2D旋转，参数是规定的角度(默认的旋转中心是中心)。与transform-origin配合使用，transform-origin定义旋转的基本点，正值是顺时针，负值是逆时针。例如

div {
    border: 3px solid #B1B6B9;
    position: absolute;
    box-shadow: 5px 5px 5px #888888;
    top: 30%;
    left: 50%;
    transform: rotate(10deg);
    transform-origin: right top;
}
img {
    max-width: 100%;
    margin: 10px;
}

<div>
    <img src="autumn.png" alt="">
</div>

rotateX(angle)：指定对象在x轴上的旋转角度

rotateY(angle)：指定对象在y轴上的旋转角度

rotateZ(angle)：指定对象在z轴上的旋转角度

rotate3d(x,y,z,angle)：3D旋转，x、y、z分别表示三个轴他们的值可以是0或1，rotate3d(1, 0, 0,angle)等同于rotateX(angle), rotate3d(0, 1, 0,angle)等同于rotateY(angle), rotate3d(0, 0, 1,angle)等同于rotateZ(angle)。

缩放（scale）

scale(x,y): 2D缩放x、y分别表示在x轴和y轴上缩放的大小，大于1就是放大小于1就是缩小，如果第二个参数未提供，则默认取第一个参数的值。把参数换成负数，会有很好玩的事情发生哦。

scalex(x): 只缩放x轴上的大小。

scaley(y): 只缩放y轴上的大小。

scale3d(x, y, z): 3D缩放，x、y、z分别表示x轴、y轴和z轴上的缩放大小。

扭曲（skew）

skew(x-angle,y-angle)：指定对象沿着 X 和 Y 轴的 2D 倾斜转换。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。

skewX(angle)：指定对象沿着 X 轴的 2D 倾斜转换。

skewY(angle)：指定对象沿着 Y 轴的 2D 倾斜转换。