The transform and transition of CSS learning

In front-end development, we often use CSS in the transform and transition, then what are their specific usage? Share with you today one or two.

Transform: Conversion

Moves, scales, rotates, lengthens, or stretches an element.

Method: Translate ():

Element is moved from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters

There are two div's, and their CSS style is as follows:

. before {

width:70px;

height:70px;

Background-color: #8fbc8f;

}

. After {

width:70px;

height:70px;

Background-color: #ffe4c4;

-webkit-transform:translate (50px, 30px);

-moz-transform:translate (50px, 30px);

-ms-transform:translate (50px, 30px);

-o-transform:translate (50px, 30px);

Transform:translate (50px, 30px);

}

The results are as follows:

Scale ()

The dimensions of the element are increased or decreased, depending on the given width (X-axis) and height (Y-axis) parameters

There are two div's, and their CSS style is as follows:

. before {

width:70px;

height:70px;

Background-color: #8fbc8f;

}

. After {

width:70px;

height:70px;

Background-color: #ffe4c4;

-webkit-transform:scale (1.5, 0.8);/* The width becomes 1.5 times times the original and the height becomes 0.8 times times the original */

-moz-transform:scale (1.5, 0.8);

-ms-transform:scale (1.5, 0.8);

-o-transform:scale (1.5, 0.8);

Transform:scale (1.5, 0.8);

}

The results are as follows:

Skew ()

The element flips the given angle, according to the given horizontal line (X axis) and vertical (Y-axis) parameters

. before {

width:70px;

height:70px;

Background-color: #8fbc8f;

}

. After {

width:70px;

height:70px;

Background-color: #ffe4c4;

-webkit-transform:skew (20deg, 20deg);/* Flip elements around the X-axis 20 degrees, flip 20 degrees around the Y-axis */

-moz-transform:skew (20deg, 20deg);

-ms-transform:skew (20deg, 20deg);

-o-transform:skew (20deg, 20deg);

Transform:skew (20deg, 20deg);

}

The results are as follows:

Transition: Transition

The effect of an element gradually changing from one style to another

There is a Div, and its CSS style is as follows:

div {

width:100px;

height:100px;

Background-color: #87cefa;

-webkit-transition:width 2s;/* width change effect of 2s */

-moz-transition:width 2s;

-o-transition:width 2s;

Transition:width 2s;

}

div:hover{

width:300px;

}

Article Source: HTML5 China

The transform and transition of CSS learning