CSS3 Transform effect detailed

1. Browser support situation

Internet Explorer 10, Firefox, and Opera support transform properties.

Internet Explorer 9 supports an alternative-ms-transform attribute (only for 2D conversions).

Safari and Chrome support alternative-webkit-transform attributes (2D conversion).

Opera only supports 2D conversion

2.transform Properties

value	Description	Test
None	The definition does not convert.	Test
Matrix (n,n,n,n,n,n)	Defines a 2D conversion, using a matrix of six values.	Test
Matrix3D (n,n,N,n,n, N,n,N,N, n,n,n,n,n,n,n)	Defines a 3D conversion, using a 4x4 matrix of 16 values.
Translate (x,y)	Defines a 2D transformation.	Test
Translate3d (x,y,z)	Defines a 3D transformation.
TranslateX (x)	Define the conversion, just with the value of the X-axis.	Test
Translatey (y)	Define the conversion, just use the Y-axis value.	Test
Translatez (z)	Defines a 3D conversion, just using the Z-axis value.
Scale (x,y)	Defines a 2D scaling transformation.	Test
Scale3d (x,y,z)	Defines a 3D scaling transformation.
ScaleX (x)	Define the zoom transformation by setting the value of the X-axis.	Test
ScaleY (y)	Define the zoom transformation by setting the value of the Y-axis.	Test
Scalez (z)	Define a 3D scaling transformation by setting the value of the Z-axis.
Rotate (angle)	Defines the 2D rotation, which specifies the angle in the parameter.	Test
Rotate3d (x,y,z,angle)	Defines the 3D rotation.
Rotatex (angle)	Defines the 3D rotation along the X-axis.	Test
Rotatey (angle)	Defines a 3D rotation along the Y-axis.	Test
Rotatez (angle)	Defines a 3D rotation along the Z-axis.	Test
Skew (x-angle,y-angle)	Defines a 2D tilt transition along the X and Y axes.	Test
SKEWX (angle)	Defines a 2D tilt transition along the X-axis.	Test
Skewy (angle)	Defines a 2D tilt transition along the Y-axis.	Test
Perspective (n)	Defines a Perspective view for 3D transformation elements.	Test

3. Specify the starting point for the element transformation

The Transform-origin property allows us to specify the starting point for applying transformations. The default state starts with a center, but you can choose another. If you specify only one, the other is center.

Percent specifies the starting point of an element's x-axis or y-axis

Length value Specify distance

Left center right specifies the distance on the x-axis

Top center Bottom Specify the distance on the y-axis

4. Transform as animation and transition processing

Cases

. class:hover{

transition-duration:1.5s;

Transform:rotate (360DEG)

}

CSS3 Transform effect detailed