CSS3 the key points of knowledge;

CSS3 Transition (CSS3 transition is the effect of an element gradually changing from one style to another.) ）

Instance

Hover over a DIV element and gradually change the width of the table from 100px to 300px:

Div{width:100px;transition:width 2s;-webkit-transition:width 2s; */Safari */}div:hover {width:300px;}

CSS3 linear gradient Syntax background:linear-gradient (direction, COLOR-STOP1, COLOR-STOP2, ...);

CSS3 3D Conversion

Rotatex () method

The Rotatex () method, which rotates around its element in a given degree x-axis.

Instance Div
{
Transform:rotatex (120DEG);
-webkit-transform:rotatex (120DEG); /* Safari and Chrome */
}

Rotatey () method

The Rotatey () method, which rotates around its element in the y-axis of a given degree.

Instance Div
{
Transform:rotatey (130DEG);
-webkit-transform:rotatey (130DEG); /* Safari and Chrome */
}

CSS3 Flexible box (flex box)

The Elastic box is a new layout mode for CSS3.

The CSS3 elastic box (flexible box or flexbox) is a layout that ensures that elements have the proper behavior when the page needs to accommodate different screen sizes and device types.

The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align, and allocate white space for child elements in a container.

CSS3 the key points of knowledge;