The transform and transition in CSS

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:

Rotate ()

The element rotates the given angle clockwise. Negative values are allowed, and the elements rotate counterclockwise.

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:rotate (20deg);            -moz-transform:rotate (20deg);            -ms-transform:rotate (20deg);            -o-transform:rotate (20deg);            Transform:rotate (20deg);        }

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, 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);/* Flips elements around the X-axis 20 degrees, flips 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;/* length is 2s width change effect */            -moz-transition:width 2s;            -o-transition:width 2s;            transition:width 2s;        } div:hover{            width:300px;        }

The transform and transition in CSS