About 2D, 3D conversions

First, the conversion

1, the definition of conversion:

1, you can change the shape of the element, position, size.

2, there are two types of conversions:

A: The element can only change on the x-axis and the y-axis plane. Change shape, size, and position.

Example: Panning (move), tilt (skew), rotation (rotate) scaling (scale)

3D Conversion: space conversion

3. Properties of the transformation:

1>,transform Properties (2D conversion, 3D conversion);

• Common values:, none (default, no conversion)

, transform-function; (conversion function)

, transform functions: pan, rotate, tilt, zoom.

notation: "1" Rotation: transform:rotate (45deg);

The angle can be positive: rotate clockwise or negative: rotate counterclockwise

"2" Scaling: Transform:scale (x, y)/(0~1), 1~,scaley (y), ScaleX (X);

Total: 0~1: Indicates zoom out, greater than 1 for magnification

"3" Tilt skew:skew (angle);

"4" Translate (x, y);

4 transform-origin Properties:

<1> default: The origin of the deformation is the center point of our element;

<2> notation: Transform-origin: (x, y)/keywords (right top bottom);

5, 2D Conversion

<1>transform-style:

Transform Functions:

Matrix (): Specifies a 2D transformation as a six value (A,B,C,D,E,F) transformation matrix, equivalent to applying a [a,b,c,d,e,f] transformation matrix directly

Translate (): Specifies the 2D translation (2D translation) of the object. The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0

Translatex (): Specifies the translation of the x-axis (horizontal direction) of the object

Translatey (): Specifies the translation of the y-axis (vertical direction) of the object

Rotate (): Specifies the 2D rotation (2D rotation) of the object, preceded by the definition of < ' transform-origin ' > property

Scale (): Specifies the object's 2D scales (2D scaling). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the value of the first parameter is taken by default

ScaleX (): Specifies the (horizontal) scaling of the x axis of the object

ScaleY (): Specifies the (vertical) scaling of the y-axis of the object

Skew (): Specifies the object skew transformation (oblique-cut twist). The first parameter corresponds to the x-axis, and the second parameter corresponds to the y-axis. If the second parameter is not provided, the default value is 0

SKEWX (): Specifies the (horizontal) distortion of the x axis of the object

Skewy (): Specifies the (vertical) distortion of the y-axis of the object

3D Transform Functions:

Matrix3D (): Specify a 3D transform in the form of a 4x4 matrix

Translate3d (): Specifies the 3D displacement of the object. The 1th parameter corresponds to the x-axis, the 2nd parameter corresponds to the y-axis, the 3rd parameter corresponds to the z-axis, and the parameter does not allow omitting

Translatez (): Specifies the translation of the z-axis of the object

Rotate3d (): Specifies the 3D rotation angle of the object, where the first 3 parameters represent the direction of rotation x, Y, Z, and the 4th parameter represents the angle of rotation, and the parameter does not allow omitting

Rotatex (): Specifies the angle of rotation of the object on the x-axis

Rotatey (): Specifies the angle of rotation of the object on the y-axis

Rotatez (): Specifies the angle of rotation of the object on the z axis

Scale3d (): Specifies the 3D scale of the object. The 1th parameter corresponds to the x-axis, the 2nd parameter corresponds to the y-axis, the 3rd parameter corresponds to the z-axis, and the parameter does not allow omitting

Scalez (): Specifies the object's z-axis scaling

Perspective (): Specify Perspective distance

About 2D, 3D conversions