The transform of CSS3 animation effect

Inadvertently look at the blog to find this attribute, by the way familiar with a bit, Baidu and see the CSS3 Help document, special finishing

The Transform adapts to 2D or 3D transformations of any DOM element, such as rotation, stretching, panning, skewing, and so on.

Currently the browser does not fully support all transform,

IE9,               Firefox and     Opera only support 2D transforms, the corresponding CSS is defined as:-ms-transform,-moz-transform and-o-transform, while Safari and Chrome Both 2D and 3D transforms are supported, and the corresponding CSS is defined as:-webkit-transform

The value of this property is mainly as follows:

Value	Description
None	Define this does not require conversion
Matrix (n,n,n,n,n,n)	Use a matrix of 6 values to define a 2D transformation
Matrix3D (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Use a matrix with 4*4 to define a 3D transformation
Translate (x, y)	Define a 2D conversion, x: Horizontal displacement, Y: vertical displacement, and personal feel similar to Margin-left (left) and Margin-top (top).
Translate3d (x, y, z)	Define a 2D conversion, x: Horizontal displacement, Y: vertical Displacement, z:z direction displacement
TranslateX (x)	Define a horizontal direction 2D conversion
Translatey (y)	Define a vertical direction 2D conversion
Translatez (z)	Define a Z-direction 3D conversion
Scale (x, y)	Define a 2D stretch, x: horizontal stretch, y: Vertical stretch
Scale3d (x, y, z)	One 3D stretch, x: horizontal stretch, y: extrude vertically, z:z direction
ScaleX (x)	Defines a horizontal-oriented stretch
ScaleY (y)	To define a vertical direction stretch
Scalez (z)	Defines a stretch in Z-direction
Rotate (angle)	Define a 2D rotation, angle: rotation angle (deg)
Rotate3d (x,y,z,angle)	Define a 3D rotation,
Rotatex (angle)	Define an X-axis 3D rotation
Rotatey (angle)	Define a Y-axis 3D rotation
Rotatez (angle)	Define a z-axis 3D rotation
Skew (x-angle,y-angle)	Defines an x-axis and a 2D tilt of the y-axis
SKEWX (angle)	Defines a 2D tilt of an x-axis
Skewy (angle)	Defines a 2D tilt for a y-axis
Perspective (n)	Define a 3D conversion effect and Perspective view

Transform-origin with transformto define the position of the element rotation

Syntax: transform-origin: x-axis y-axis z-axis;

Description

Property Value	Description
X-axis	Defines the transition position of the x-axis. The possible values are: Left Center Right Length %
Y-axis	Defines the transition position of the y-axis. The possible values are: Top Center Bottom Length %
Z-axis	Defines the transition position of the z-axis. The possible values are: Length

default value : 50% 50%, effect equal to center center

Definition of desirable value:

<percentage>:

Specifies the coordinate value in percent. Can be a negative value. can be a pure number or a number plus a percentage

<length>:

Specifies the coordinate value with the length value. Can be a negative value. must be a number plus unit (e.g. px)

Left

Specify the horizontal axis of the origin to be left

Center①:

Specifies the horizontal axis of the origin point as center

Right

Specify the horizontal axis of the origin to right

Top

Specify the vertical axis of the origin as top

Center②:

Specify the ordinate for the origin point as center

Bottom

specifies that the ordinate of the origin point is bottom

The transform of CSS3 animation effect