Transform properties in CSS

The Transform property in CSS allows you to modify the coordinate space of the CSS visual model. With transform, elements can be moved (translate), rotated (rotate), scaled (scale), and skewed (skew).

If the property has a value other than none, a cascading context will be generated. In this case, the object will be the containing block of the position:fixed element it contains (a containing block).

Grammar

/* Keyword values */transform:none;/* Function values */transform:matrix (1.0, 2.0, 3.0, 4.0, 5.0, 6.0); Transform:translate (12px, 50%); Transform:translatex (2EM); Transform:translatey (3in); Transform:scale (2, 0.5); Transform:scalex (2); Transform:scaley (0.5); transform:rotate (0.5turn); Transform:skew ( 30deg, 20deg), Transform:skewx (30deg), Transform:skewy (1.07rad), Transform:matrix3d (1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8. 0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); Transform:translate3d (12px, 50%, 3em); Transform:translatez (2px); transf Orm:scale3d (2.5, 1.2, 0.3); Transform:scalez (0.3); Transform:rotate3d (1, 2.0, 3.0, 10deg); Transform:rotatex (10deg); Transform:rotatey (10deg), Transform:rotatez (10deg), transform:perspective (17PX),/* Multiple function values */ Transform:translatex (10px) rotate (10deg) Translatey (5px);/* Global values */transform:inherit;transform:initial; Transform:unset; 

Transform: <transform-function> [<transform-function>]* | None

Vendor prefixes: If you need to use this feature, please check your browser compatibility list for each browser vendor's prefix.

Take value

<transform-function>

At least one CSS transform functions is applied, see the example below.

None

Specify not to apply transform

Example

View the Using CSS transforms.

Standard syntax (formal syntax)

How to read CSS syntax.

None

Example

See Using CSS transforms.

Online example

HTML Content

<p>transformed element</p>

CSS Content

p {border:solid red;-webkit-transform:translate (100px) rotate (20deg);-webkit-transform-origin:0 -250px; transform:t Ranslate (100px) rotate (20deg); Transform-origin:0 -250px; }

CSS Transform functions

The Transform property allows you to use the transform function to reach the effect of deformation in the coordinate system used by the element. These features are described below:

Matrix (matrices)

Transform:  Matrix (A, C, B, D, TX, Ty)/* A, B, C, D creates a morph matrix    ┌     ┐    │a b│   │c d│   └     ┘   tx, Ty is The value of the warp.  */

Specifies 6 values in a two-dimensional matrix, and is equivalent to using matrix matrices [a b c D tx ty].

Note:gecko (Firefox) accepts a <length> value for TX and Ty.
Webkit (Safari, Chrome) and Opera currently support a unitless <number> for Tx and Ty.

Online example

Background:gold;  Width:30em;    -moz-transform:matrix (1, -0.2, 0, 1, 0, 0);-webkit-transform:matrix (1, -0.2, 0, 1, 0, 0);     -o-transform:matrix (1, -0.2, 0, 1, 0, 0);    -ms-transform:matrix (1, -0.2, 0, 1, 0, 0);        Transform:matrix (1,-0.2, 0, 1, 0, 0);

Background:wheat;max-width:intrinsic;    -moz-transform:matrix (1, 0, 0.6, 1, 15em, 0);-webkit-transform:matrix (1, 0, 0.6, 1,  , 0);     -o-transform:matrix (1, 0, 0.6, 1,  0);    -ms-transform:matrix (1, 0, 0.6, 1,  0);        Transform:matrix (1, 0, 0.6, 1,  250, 0);

See Also

Examples of linear transformation matrices Wikipedia

Coordinate transformation matrices mathamazement.com

Microsoft ' s matrix filter MSDN

Rotating

Transform:  rotate (angle);       /* an <angle>, e.g.  rotate (30deg) */

Start the installation from the origin (specified by the Transform-origin property) to rotate the element in a clockwise direction to a specific angle. The matrix of this action object is [cos (angle) sin (angle)-sin (angle) cos (angle) 0 0].

Scaling

Transform: Scale  (sx[, Sy]);     /* One or both unitless <number>s, e.g. scale  (2.1,4) */

Specifies a two-dimensional scaling operation by the [SX, SY] description. If SY is not specified, the default value is the same as SX.

X-Direction Scaling

Transform:  ScaleX (SX);          /* a unitless <number>, e.g.  ScaleX (2.7) */

Use the vector [SX, 1] to complete the scaling in the x direction.

Y-direction scaling

Transform:  ScaleY (SY)/           * a unitless <number>, e.g.  ScaleY (0.3) */

Use the vector [1, Sy] to complete the scaling in the y direction.

Tilt

Transform:  skew (ax[, ay])/       * One or both <angle>s, e.g.  skew (30deg,-10deg) */

The element is tilted at the specified angle in the X-and y-axis directions. If AY is not provided, there is no tilt on the y-axis.

Tilt in x direction

Transform:  skewx (angle)/         * an <angle>, e.g.  skewx ( -30deg) */

Tilt at the specified angle around the x-axis

Tilt in y direction

Transform:  skewy (angle)/         * an <angle>, e.g.  skewy (4deg) */

Tilts around the y-axis at the specified angle

Translation

Transform:  translate (tx[, Ty])/  * One or both <length> values * *

Specifies a 2D translation by the vector [TX, Ty]. If ty isn ' t specified, its value was assumed to being zero.

Complete 2D panning with vector [TX, Ty]. If Ty is not specified, its value defaults to 0.

Pan in x direction

Transform:  TranslateX (TX)/       * See <length> for possible values */

Shift the specified distance in the x-axis

Translate in y direction

Transform:  translatey (ty)/       * See <length> for possible values */

Shift the specified distance in the y-axis

Browser compatibility

Tips

IE5 or later versions support the Matrix Filter property to accomplish the same effect.

In IE9, you use jquery to dynamically add styles, do not show effects, and other browsers display normal. is because IE9 thinks that-ms-transform is invalid script and does not execute. Please change "-ms-transform" to "Mstransform".