translate3d()
功能:3d平移
语法:transform: translate3d(tx, ty, tz);
单向:translateX()
--The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a <length> 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 <length> 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 <length> defining how much it moves.
--translateZ(tz) is a shorthand for translate3d(0, 0, tz).
scale3d()
功能: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).
rotate3d()
功能: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.