Transform and transition, transitiontransform in CSS

Transform and transition, transitiontransform in CSS
Transform: Conversion

Move, scale, rotate, stretch, or stretch elements.

Method: translate ():

The element moves from its current position based on the given left (x coordinate) and top (y coordinate) position parameters.

There are two divs whose css styles are 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 result is as follows:

Rotate ()

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

There are two divs. Their css styles are 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 result is as follows:

Scale ()

The element size increases or decreases according to the given width (X axis) and height (Y axis) parameters.

There are two divs whose css styles are 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 is 1.5 times that of the original version, the height is changed to 0.8 times */-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 result is as follows:

Skew ()

The given angle of element flip, based on the given horizontal line (X axis) and vertical line (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 for 20 degrees, flip around Y axis 20 degrees */-moz-transform: skew (20deg, 20deg);-ms-transform: skew (20deg, 20deg);-o-transform: skew (20deg, 20deg); transform: skew (20deg, 20deg );}

　　

The result is as follows:

 

 

 

Transition: transition

Elements gradually change from one style to another.

There is a div whose css style is as follows:

Div {width: 100px; height: 100px; background-color: #87 cefa;-webkit-transition: width 2 s; /* effect of changing the width of 2 s */-moz-transition: width 2 s;-o-transition: width 2 s; transition: width 2 s;} div: hover {width: 300px ;}