CSS3 Transform Deformation

The Transform property applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements.

W3scholl

Http://www.w3school.com.cn/cssref/pr_transform.asp

Browser support

Transform:none|transform-functions;

Div{transform:rotate (7deg);-ms-transform:rotate (7deg);     /* IE 9 */-moz-transform:rotate (7deg);     /* Firefox */-webkit-transform:rotate (7deg); /* Safari and Chrome */-o-transform:rotate (7deg);     /* Opera */}

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 conversions.

Property List

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

CSS3 Transform Deformation