CSS3之transform

CSS变形功能包括：移动（translate）、缩放（scale）、旋转（rotate）、倾斜（skew）

变形坐标轴

• x轴的正值在右侧，负值在左侧。
• y轴的正值沿纵轴向下，负值沿纵轴向上
• z轴从显示器上跃出，指向你的眼前。z轴上的正值离你较近，负值离你较远
• 每个元素都有自己的参照物，各轴都相对自身而动。如果旋转了元素，轴也随之旋转。旋转之后再变形，是相对旋转后的轴计算的。

translate

平移函数沿一个轴或多个轴移动。如果值是百分数，移动距离相对元素自身的尺寸计算

• translateX()沿元素自身的x轴移动元素。（值为正 则向右移动）
• translateY()沿元素自身的y轴移动元素。（ 值为正 则向下移动）
• translateZ()沿元素自身的z轴移动元素。（值为正 则向右移动）
• translate()第一个值代表x轴，第二个值代表y轴（）。（translate(x,y):如果只传入一个参数，则只代表x）

scale

缩放变形可以把元素放大或缩小。缩放函数的值都是无单位的实数，而且始终为正数。表示本身缩放的倍数。

• scaleX()元素x轴缩放（）
• scaleY()元素y轴缩放（）
• scaleZ()元素z轴缩放（）
• scale()元素宽高缩放，1个值即是宽高都进行缩放（ scale() 1个参数 控制x和y 2个参数 分别为x和y）

rotate

旋转函数绕某个旋转轴元素(值为deg)

• rotateX()元素x轴 3D旋转（值为正：上部分向屏幕里移动，下部分向屏幕外移动； 默认沿着y轴的中心，和x轴旋转）
• rotateY()元素y轴 3D旋转（角度为正的时候：左侧出来 右侧进入）
• rotateZ()定义沿着 Z 轴的 3D 旋转。
• rotate()（值为正：顺时针）函数实施的是2D旋转，是我们最常用的旋转方式。它的效果等同于rotateZ()。

skew

倾斜函数沿x轴或y轴倾斜元素。元素不能沿z轴或3D空间中的向量倾斜,参数是使元素倾斜指定的角度（deg）

• skewX()元素x轴倾斜
• skewY()元素y轴倾斜
• skew(a,b)元素x和y倾斜（ 一个参数只代表x，两个参数代表x 和 y）

移动原点 transform-origin

• 目前所见的变形有个共同点，都以元素的绝对中心为变形的原点。例如，旋转元素时，是绕着中心旋转的，而不是绕着某一角度旋转的。这是默认行为，不过可以使用transform-origin属性修改。
• transform-origin属性的值为两个或三个关键字，用于定义相对哪个点变形。第一个值针对横向，第二个值针对纵向，可选的第三个值是z轴上的长度。