css3变形——transform

功能：平移

语法： = translate( | [, | ]? )

写法：transform:  translate(tx[, ty]);    /* 用向量[tx, ty]完成2D平移。如果ty没有指定，它的值默认为0。 */

单向：X方向平移：transform:  translateX(tx);    /* 在X轴平移指定距离 */           Y方向平移：transform:  translateY(ty);    /* 在Y轴平移指定距离 */

示例：transform: translate(50px, 20%);    /* X方向偏移50px，Y方向偏移其高度的20% */

功能：缩放

语法： = scale( [, ]? )

写法：transform:  scale(sx[, sy]);    /*由[sx, sy]描述指定一个二维缩放操作。如果sy 未指定，默认认为和sx的值相同。*/

单向：X方向缩放：transform:  scaleX(sx);    /* 使用向量[sx, 1] 完成在X方向上的缩放. */           Y方向缩放：transform:  scaleY(sy);    /* 使用向量[1, sy] 完成在Y方向上的缩放. */

示例：transform: scale(1.2);    /* X方向和Y方向缩放1.2倍 */           transform: scale(1, 1.2);    /* X方向缩放1倍，Y方向缩放1.2倍 */

功能：旋转

语法： = rotate( )

写法：transform:  rotate(angle);    /* 从原点(由 transform-origin 属性指定)开始按照顺时针方向旋转元素一个特定的角度。此操作对象的矩阵是  [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] 。 */

示例：transform: rotate(30deg);    /* 顺时针旋转30deg */

功能：倾斜

语法： = skew( [, ]? )

写法：transform:  skew(ax[, ay]);    /* 元素在X轴和Y轴方向以指定的角度倾斜。如果ay未提供，在Y轴上没有倾斜。 */

单向：X方向倾斜：transform:  skewX(angle);    /* 绕X轴以指定的角度倾斜 */           Y方向倾斜：transform:  skewY(angle);    /* 绕Y轴以指定的角度倾斜 */

示例：transform: skew(30deg);    /* Y轴往X轴倾斜30deg */

功能：3d平移

语法：transform: translate3d(tx, ty, tz);

单向：translateX()           --The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a defining how much it moves horizontally.           --translateX(tx) is a shortcut for translate(tx, 0).           translateY()           --The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a defining how much it moves vertically.           --translateY(ty) is a shortcut for translate(0, ty).           translateZ()           --The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a defining how much it moves.           --translateZ(tz) is a shorthand for translate3d(0, 0, tz).

功能：3d缩放

语法：transform: scale3d(sx, sy, sz);

单向：scaleX()           --The scaleX() CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform.              The scaling is not isotropic and the angles of the element are not conserved. scaleX(-1) defines an axial symmetry with a vertical axis passing by the origin (as specified by the transform-origin property).           --scaleX(sx) is a shorthand for scale(sx, 1) or for scale3d(sx, 1, 1).           scaleY()           --The scaleY() CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is 1, in which case the function is the identity transform.              The scaling is not isotropic and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry with a horizontal axis passing by the origin (as specified by the transform-origin property).           --scaleY(sy) is a shorthand for scale(1, sy) or for scale3d(1, sy, 1).           scaleZ()           --The scaleZ() CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform.              The scaling is not isotropic and the angles of the element are not conserved. scaleZ(-1) defines an axial symmetry along the z-axis passing by the origin (as specified by the transform-origin property).           --scaleZ(sz) is a shorthand for scale3d(1, 1, sz).

功能：3d旋转

语法：transform: rotate3d(x, y, z, a);

单向：rotateX()           --The rotateX()CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle;              if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by transform-origin CSS property.           --rotateX(a)is a shorthand for rotate3D(1, 0, 0, a).           rotateY()           --The rotateY()CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle;              if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by transform-origin CSS property.           --rotateY(a)is a shorthand for rotate3D(0, 1, 0, a).           rotateZ()           --The rotateZ()CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle;              if positive, the movement will be clockwise, if negative, it will be counter-clockwise. The axis of rotation passes by the origin, defined by transform-origin CSS property.           --rotateZ(a)is a shorthand for rotate3D(0, 0, 1, a).

说明：原点与(x, y, z)的连线作为轴旋转a度。

英文定义： The rotate3d()CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. In the 3D space, rotations have three degrees of liberty, describing an axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin CSS property. If the vector is not normalized, that is the sum of the square of its three coordinates is not 1, it will be normalized internally. A non-normalizable vector, like the null vector, [0, 0, 0], will cause the rotation not to be applied, without invaliding the whole CSS property.