CSS3 Transform attribute detailed CSS3 Transform properties use tutorial

Grammar:

transform: none | Matrix (<number>,<number>,<number>,<number>,<number>,<number>)? Translate (<LENGTH>[,<LENGTH>])? Translatex (<length>)? Translatey (<length>)? Rotate (<angle>)? Scale (<NUMBER>[,<NUMBER>])? ScaleX (<number>)? ScaleY (<number>)? Skew (<ANGLE>[,<ANGLE>])? Skewx (<angle>) | | Skewy (<angle>)?

default value : None

Take value:

None: No conversions

Matrix (<number>,<number>,<number>,<number>,<number>,<number>): With a value of six (A,b, C,D,E,F) transforms a matrix to specify a 2D transformation, which is equivalent to applying a [a,b,c,d,e,f] transformation matrix directly

Translate (<length>[, <length>]): Specifies the 2D translation (2D translation) of the object. The first argument corresponds to the x axis, and the second parameter corresponds to the Y axis. If the second argument is not supplied, the default value is 0

Translatex (<length>): Specifies the translation of an object x axis (horizontal)

Translatey (<length>): Specifies the translation of the y-axis (vertical) of the object

Rotate (<angle>): Specifies the 2D rotation (2D rotation) of the object, preceded by the definition of the Transform-origin attribute

Scale (<number>[, <number>]): Specifies the 2D scale (2D scaling) of the object. The first argument corresponds to the x axis, and the second parameter corresponds to the Y axis. If the second argument is not supplied, the value of the first argument is taken by default

ScaleX (<number>): Specifies the (horizontal) scaling of the object X axis

ScaleY (<number>): Specifies the (vertical) scaling of the object's Y axis

Skew (<angle> [, <angle>]): Specifies the object skew transformation (skew skew). The first argument corresponds to the x axis, and the second parameter corresponds to the Y axis. If the second argument is not supplied, the default value is 0

Skewx (<angle>): Specifies the (horizontal) skew of the object X axis

Skewy (<angle>): Specifies the (vertical) skew of the object's Y axis

Description

Sets or retrieves the transformation of an object.

• The corresponding script attribute is transform.

Compatibility:

Writing:

Kernel type	Writing
Webkit (Chrome/safari)	-webkit-transform
Gecko (Firefox)	-moz-transform
Presto (Opera)	-o-transform
Trident (IE)	-ms-transform
W3c	Transform

Example:

<! DOCTYPE html> <meta charset= "Utf-8"/> <TITLE>CSS 2D transform_css Reference manual _web Front-End Development Reference manual series </title> <style> H1{clear:both;padding-top:10px;font-size:16px;font-family:arial;} . Test{zoom:1;width:700px;margin:0;padding:0;list-style:none;} . Test li{float:left;margin:20px 30px 0 0;border:1px solid #000;} . Test Li P{width:300px;height:100px;margin:0;background: #ddd;} . Test. Matrix{-moz-transform:matrix (0,1,1,1,10px,10px);-webkit-transform:matrix (0,1,1,1,10,10);-o-transform: Matrix (0,1,1,1,10,10);-ms-transform:matrix (0,1,1,1,10,10); Transform:matrix (0,1,1,1,10,10); . Test. Translate p{-moz-transform:translate (5%,10px);-webkit-transform:translate (10px,10px);-o-transform: Translate (10px,10px);-ms-transform:translate (10px,10px); transform:translate (10px,10px); . Test. Translate2 p{-moz-transform:translate ( -10px,-10px);-webkit-transform:translate ( -10px,-10px);-o-transform: Translate ( -10px,-10px);-ms-transform:translate ( -10px,-10px); transform:translate ( -10px,-10px); . Test. Translatex P{-moz-transform:translatex (20px);-webkit-transform:translatex (20px);-o-transform:translatex ( 20px);-ms-transform:translatex (20px); Transform:translatex (20px); . Test. Translate3 p{-moz-transform:translate (20px);-webkit-transform:translate (20px);-o-transform:translate (20px );-ms-transform:translate (20px); transform:translate (20px);} . Test. Translatey P{-moz-transform:translatey (10px);-webkit-transform:translatey (10px);-o-transform:translatey ( 10px);-ms-transform:translatey (10px); Transform:translatey (10px); . Test. Translate4 p{-moz-transform:translate (0,10px);-webkit-transform:translate (0,10px);-o-transform:translate ( 0,10px);-ms-transform:translate (0,10px); transform:translate (0,10px); . Test. Rotate{-moz-transform:rotate ( -5deg);-webkit-transform:rotate ( -5deg);-o-transform:rotate ( -5deg);- Ms-transform:rotate ( -5deg); transform:rotate ( -5deg);} . Test. Rotate2{-moz-transform:rotate (5deg);-webkit-transform:rotate (5deg);-o-transform:rotate (5deg);- Ms-transform:rotate (5deg); transform:rotate (5deg);} . Test. Scale{-moz-transform:scale (. 8);-webkit-transform:scale (. 8);-o-transform:scale (. 8);-ms-transform:scale (. 8 ); Transform:scale (. 8);} . Test. Scale2{-moz-transform:scale (1.2);-webkit-transform:scale (1.2);-o-transform:scale (1.2);-ms-transform: Scale (1.2); Transform:scale (1.2);} . Test. Skew{-moz-transform:skew ( -5deg);-webkit-transform:skew ( -5deg);-o-transform:skew ( -5deg);-ms-transform: Skew ( -5deg); Transform:skew ( -5deg);} . Test. Skew2{-moz-transform:skew ( -5deg,-5deg);-webkit-transform:skew ( -5deg,-5deg);-o-transform:skew ( -5deg,-5deg );-ms-transform:skew ( -5deg,-5deg); Transform:skew ( -5deg,-5deg);} </style> <body> <ul class= "Test" > <li class= "Matrix" > <p>transform:matrix (0,1,1,1,10,10) </p> </li> </ul> <ul class= "Test" > <li class= "Translate" > <p>transform:translate (5%,10px) </p> </li> <li class= "Translate2" > <p>transform:translate ( -10px,-10px) </p> </li> <li class= "Translatex" > <p>transform:translatex (20px) </p> </li> <li class= "Translate3" > <p>transform:translate (20px) </p> </li> <li class= "Translatey" > <p>transform:translatey (10px) </p> </li> <li class= "Translate4" > <p>transform:translate (0,10px) </p> </li> </ul> <ul class= "Test" > <li class= "Rotate" > <p>transform:rotate ( -15deg) </p> </li> <li class= "Rotate2" > <p>transform:rotate (15deg) </p> </li> </ul> <ul class= "Test" > <li class= "scale" > <p>transform:scale (. 8) </p> </li> <li class= "Scale2" > <p>transform:scale (1.2) </p> </li> </ul> <ul class= "Test" > <li class= "Skew" > <p>transform:skew ( -5deg) </p> </li> <li class= "Skew2" > <p>transform:skew ( -5deg,-5deg) </p> </li> </ul> </body>