CSS3 Font, 2D conversion, 3D conversion

Learn the CSS3 font, 2D conversion, 3D conversion one, font @font-face

Storing the font file on the Web server, defined in the CSS3 @font-face rule, is automatically downloaded to the user's computer when needed.

{font-family:myfonts;//defines the font name
Src:url (myfonts.ttf), url (myfonts.eot), url (MYFONTS.OTF),//font file source optional. TTF,. EoT,. OTF, etc. three format files   }

PS: In order to be compatible with different browsers, it is best to provide multiple font files in different file formats

Second, 2D conversion1, Transform

Transform compatibility: To be compatible with most major browsers, you need to add the appropriate prefix. As shown below, subsequent documents are not repeated.

Transform:scale (2,4);
-ms-transform:scale (2,4);     /*  */-webkit-transform:scale (2,4)    ; /*  */-o-transform:scale (2,4)    ; /*  */* Firefox * /

Translate (30px,60px) panning

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

Transform:translate (50%, 50%);//based on normal document flow position movement, can be used to center the DIV vertically

Scale (2,4) scaling

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

Transform:scale (2,4); The width is enlarged to the original twice times, the height is enlarged to 4 times times the original

Rotate (30deg) rotation

The element rotates the given angle clockwise. Allow negative values, elements will rotate counterclockwise

Transform:rotate (30deg);//rotate 30 degrees clockwise

Skew (30deg, 60deg)

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

Transform:skew (30deg, 60deg);//Flip 30 degrees on the x-axis, flip 60 degrees on the y-axis

Matrix (A,B,C,D,E,F)

The matrix () method combines all 2D conversion methods.

The matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements.

In popular understanding, the new coordinates (x ', y ') are obtained by matrix transformation to achieve the effects of element rotation, scaling, movement and tilt.

Where ax+cy+e is the horizontal coordinate and the bx+dy+f is the vertical coordinate

2, Transform-origin

Allows you to change the position of the element being converted.

The element x and y axes can be changed by the convert element. The 3D conversion element can also change its Z-axis

Transform-origin:x-axis Y-axis Z-axis;

Tri, 3D conversion translate3d (x, Y, z)

TranslateX (30px) Translatey (60px) Translatez (30px)

Scale3d (x, Y, z)

ScaleX (2) ScaleY (4) Scalez (0.5)

Rotate3d (x, Y, z)

Rotatex (30deg) Rotatey (60deg) Rotatez (0deg)

Matrix3D (a,b,c,d,e,f,g,h,i,j,k,l)

CSS3 Font, 2D conversion, 3D conversion