A detailed description of the transform function in CSS3

This time to bring you CSS3 in the transform function of the detailed, CSS3 in the transform function of what matters, the following is the actual case, take a look.

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*//*-we Bkit-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:

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Using HTML and CSS to implement the Cornell notes

CSS3 Draw circular loading circles animation