Transform function in CSS3

Transform is a property in CSS3, this article mainly introduces the CSS3 of the deformation function-transform function, small series feel very good, now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

CSS3 in the transformation function: In the CSS3 can use the transform function to achieve text or image rotation, scaling, tilt, moving four types of deformation function.

1. How to use the transform function:

(1) The transform function is implemented through the Transform property in CSS3:

(2) How to use transform function:
Transform: function;
-ms-transform: function;/*ie9*/
-moz-transform: function;/*firefox*/
-webkit-transform: function;/*safari and chrome*/
-o-transform: function;/*opera*/

2, rotate rotation, specify the angle in the parameters (rotate is the clockwise rotation, DEG is the angle unit in CSS3):

(1) How to use:
-ms-transform:rotate (angle);/*ie9*/
-moz-transform:rotate (angle);/*firefox*/
-webkit-transform:rotate (angle);/*safari and chrome*/
-o-transform:rotate (angle);/*opera*/

(2) Application of rotate rotation:

1) HTML code:

<p></p>

2) CSS Code:

p{      width:300px;      height:300px;      Background-color:lightblue;      -ms-transform:rotate (45deg);/*ie9*/         -moz-transform:rotate (45deg);/*firefox*/      -webkit-transform:rotate ( 45DEG);/*safari and chrome*/      -o-transform:rotate (45deg);/*opera*/  }

3) as follows:

3. Scale Scaling Conversion:

(1) How to use: Transform:scale (value), his value is the specified magnification, such as 0.5 is the scaling 50%,1 is the scaling 100%,1.5 is scaling 150%;

-ms-transform:scale (value);/*ie9*/
-moz-transform:scale (value);/*firefox*/
-webkit-transform:scale (value);/*safari and chrome*/
-o-transform:scale (value);/*opera*/

(2) Possible values:

1) The scale (x, y) scales the elements both to and from the Y axis;
2) scale (x) scales the element only by the x-axis;
3) scale (Y) scales only the y-axis of the element;

(3) Scale scaling conversion application:

1) HTML code:

<p></p>

2) CSS Code:

p{width:300px;      height:300px;      Background-color:lightblue; /* The scaling value x and y are positive integers */-ms-transform:scale (2,2);/*ie9*/-moz-transform:scale (2,2);/*firefox*/-webkit-transform : Scale (2,2),/*safari and chrome*/-o-transform:scale (2,2),/*opera*//* Zoom value x and y are less than 1 floating-point numbers *//*-ms-transform: Scale (0.5,0.5); *//*ie9*//*-moz-transform:scale (0.5,0.5); *//*firefox*//*-webkit-transform:scale (0.5,0.5); *// *safari and chrome*//*-o-transform:scale (0.5,0.5); *//*opera*//* Scale value only when x is less than 1 of floating-point numbers *//*-ms-transform:scalex (       0.5); *//*ie9*//*-moz-transform:scalex (0.5); *//*firefox*//*-webkit-transform:scalex (0.5); *//*safari and chrome*/         /*-o-transform:scalex (0.5); *//*opera*//* Zoom value only if Y is less than 1 floating-point number *//*-ms-transform:scaley (0.5); *//*ie9*/ /*-moz-transform:scaley (0.5); *//*firefox*//*-webkit-transform:scaley (0.5); *//*safari and chrome*//*-o-transfor M:scaley (0.5); *//*opera*/} 

3) as follows:

① When not scaled:

② when the scaling value x and y are positive integers:

③ when the scale value X and Y are the floating-point numbers less than 1:

④ scaling values only when x is less than 1 floating-point numbers:

⑤ when the scale value is only y for a floating point number less than 1:

4, Tilt skew:

(1) How to use:

Transform:skew (angle); its value is the angle;
-ms-transform:skew (angle);/*ie9*/
-moz-transform:skew (angle);/*firefox*/
-webkit-transform:skew (angle);/*safari and chrome*/
-o-transform:skew (angle);/*opera*/

(2) Possible values:

1) skew (x, y) causes the element to be distorted horizontally and vertically (both the Y axis and both axes are distorted at a certain angle) with only one parameter tilted horizontally;
2) skewx (x) only distorts the element in the horizontal direction (x-axis warp distortion)
3) skewy (y) only distorts the element in the vertical direction (y-axis warp distortion)

(3) Application of tilt skew:

1) HTML code:

<p></p>

2) CSS Code:

p{      width:300px;      height:300px;      Background-color:lightblue;            /*x axis and Y axis are tilted *      /-ms-transform:skew (30deg,30deg);        -moz-transform:skew (30deg,30deg);      -webkit-transform:skew (30deg,30deg);      -o-transform:skew (30deg,30deg);            /* Set a value equal to only the x-axis tilt *      //*-ms-transform:skew (30deg); *//*ie9*/         /*-moz-transform:skew (30deg); *//*firefox*/      /*-webkit-transform:skew (30deg); *//*safari and chrome*/      /*-o-transform:skew (30deg); *//*opera*//            * Only x-axis tilt *      //*-ms-transform:skewx (30deg); *//*ie9*/         /*-moz-transform:skewx (30deg); *//*firefox*/      /*- Webkit-transform:skewx (30deg), *//*safari and chrome*/      /*-o-transform:skewx (30deg), *//*opera*//            * only y-axis tilt */      /*-ms-transform:skewy (30deg); *//*ie9*/         /*-moz-transform:skewy (30deg); *//*firefox*/      /*- Webkit-transform:skewy (30deg); *//*safari and chrome*/      /*-o-transform:skewy (30deg); *//*opera*/  }

3) as follows:

① Not tilted:

The ②x axis and the y axis are tilted:

③ sets a value equal to only the x-axis tilt:

④ only X-axis inclined:

⑤ only y-axis inclined:

5, Mobile Translate:

(1) How to use:

Transform:translate (value); its value is the distance of the specified movement;
-ms-transform:translate (value);/*ie9*/
-moz-transform:translate (value);/*firefox*/
-webkit-transform:translate (value);/*safari and chrome*/
-o-transform:translate (value);/*opera*/

(2) Possible values:
1) translate (x, y) moves horizontally and vertically (that is, the X and Y axes move simultaneously) with only one parameter, moving in the horizontal direction only;
2) TranslateX (x) only horizontal (x-axis movement)
3) Translatey (y) only vertical (Y-axis movement)

(3) Application of mobile translate:

1) HTML code:

<p class= "main" >      <p class= "P" ></p>  </p>

2) CSS Code:

. main{width:100%;      height:500px;  Background-color:lightcoral;      }. p{width:300px;      height:300px;            Background-color:lightblue;      /* Move on the x-axis and y-axis */-ms-transform:translate (50px,50px);/*ie9*/-moz-transform:translate (50px,50px);/*firefox*/ -webkit-transform:translate (50px,50px);/*safari and chrome*/-o-transform:translate (50px,50px);/*Opera*//* Set      Set a value equivalent to moving only on the x-axis *//*-ms-transform:translate (50px); *//*ie9*//*-moz-transform:translate (50px); *//*firefox*/ /*-webkit-transform:translate (50px); *//*safari and chrome*//*-o-transform:translate (50px); *//*opera*//* Only in X On-Axis Movement *//*-ms-transform:translatex (50px); *//*ie9*//*-moz-transform:translatex (50px); *//*firefox*//*-web       Kit-transform:translatex (50px); *//*safari and chrome*//*-o-transform:translatex (50px); *//*opera*//* Move only on the y-axis */ /*-ms-transform:translatey (50px); *//*ie9*//*-moz-transform:translatey (50px); *//*firefox*//*-webkit-transform:translatey (50px); *//*safari and chrome*//*-o-transform:translatey (50px); *//*Opera*/}

3) as follows:

① not moved:

② when both the X and Y axes are moved:

③ sets a value that is equivalent to moving only on the x-axis:

④ when moving only on the x-axis:

⑤ when moving only on the y-axis:

6. Use multiple variants for an element: (the same method can only be used once)

(1) How to use:

Transform: Method 1 Method 2 Method 3 Method 4;
-ms-transform: Method 1 Method 2 Method 3 method 4;/*ie9*/
-moz-transform: Method 1 Method 2 Method 3 method 4;/*firefox*/
-webkit-transform: Method 1 Method 2 Method 3 method 4;/*safari and chrome*/
-o-transform: Method 1 Method 2 Method 3 method 4;/*opera*/

(2) Application of multiple deformation methods to an element:

1) HTML code:

<p class= "main" >      <p class= "P" ></p>  </p>

2) CSS Code:

. main{      width:100%;      height:500px;      background-color:lightcoral;  }  . p{      width:300px;      height:300px;      Background-color:lightblue;      -ms-transform:translatex (200px) rotate (30deg) skew (30deg,30deg) ScaleY (0.5);/*ie9*/         -moz-transform:translatex (200px) rotate (30deg) skew (30deg,30deg) ScaleY (0.5);/*firefox*/      -webkit-transform:translatex (200px) Rotate ( 30deg) Skew (30deg,30deg) ScaleY (0.5),/*safari and chrome*/      -o-transform:translatex (200px) rotate (30deg) skew ( 30DEG,30DEG) ScaleY (0.5);/*opera*/  }

3) as follows:

① when a method is not added:

② when multiple methods are added:

7. Change Elemental Base Point Transform-origin:

(1) Possible values:

Top left	Top	Right Top
Left	Center	Right
Bottom Left	Bottom	Bottom right

(2) By default, the base point of transform attribute change is center, but it can change the base point of transform attribute change by Transform-origin;

(3) Application of changing elemental base point Transform-origin:

1) HTML code:

<p class= "main" >      <p class= "P" ></p>  </p>

2) CSS Code:

. main{      width:100%;      height:500px;      background-color:lightcoral;      margin-left:140px;      margin-top:180px;  }  . p{      width:300px;      height:300px;      Background-color:lightblue;      -ms-transform:rotate (30deg);/*ie9*/         -moz-transform:rotate (30deg);/*firefox*/      -webkit-transform: Rotate (30deg);/*safari and chrome*/      -o-transform:rotate (30deg);/*opera*/            Transform-origin:center;      /*transform-origin:top;*/      /*transform-origin:top left;*/      /*transform-origin:right top;*//      * transform-origin:left;*/      /*transform-origin:right;*/      /*transform-origin:bottom left;*//      * transform-origin:bottom;*/      /*transform-origin:bottom right;*/   }

3) as follows:

① does not add the warp function:

② Adding the Rotation function:

The ③ is rotated at center point:

The ④ rotates at a top point:

⑤ with top left as the base point of rotation:

The ⑥ is rotated by the right top as a base point:

⑦ with left as the base point of rotation:

The ⑧ is rotated at the right point:

⑨ with bottom left as the base point of rotation:

⑩ with bottom as the base point of rotation:

⑪ with bottom right as the base point of rotation:

Related recommendations:

Comprehensive comparison of CSS3 animation-related properties transition, animation, transform

How to use the transform gradient property in CSS3

css3 about transform in detail