Css 2D conversion summary, css 2D Conversion

Css 2D conversion summary, css 2D Conversion

The form of 2D conversion in CSS is as follows:

Selector {transform: Conversion Function (parameter, parameter );}

Here, transform (Yes, transform is not transfrom.) Defines the 2D or 3D conversion of elements;

2D conversion functions are divided into five categories:

• Translate () defines the displacement function. The following parameters are the offset distance between the relative X axis and the Y axis, in pixels. Format: translate (30px, 30px); indicates the relative X axis, Y axis offset: 30 pixel value, which can be a negative value, indicating reverse offset;

• Rotate () defines the rotation function; defines the clockwise rotation of an element for a given angle, allowing negative values, the element will rotate counter-clockwise, measured in degrees deg (degree), in the form of rotate (30deg ); the element rotates for 30 degrees clockwise, and the negative value indicates that the element is selected counterclockwise;

   

• Scale () defines the scaling function. Based on the given width (X axis) and height (Y axis) parameters, the element is scaled, in the unit of a multiple, in the form of scale ); it indicates that the element will be scaled up to 2 times according to the original size on the X axis and Y axis. It can be a negative number, indicating rotation;

   

• Skew () defines the flip function, which is flipped Based on the given (X axis, Y axis) parameters. The unit is angle deg, in the form of skew (30px, 30px ); it indicates that the element will be deflected 30 degrees in the Y axis and negative, indicating reverse deflection;

   

• The matrix () function method combines all 2D conversion methods to move, rotate, scale, and flip elements. Note that perspective is not defined and there is no expected deflection effect.

Example:

<! DOCTYPE html> 
Browser Resolution Page:

The first rectangular div moves 100px relative to the original position (X axis;
The second rectangle div is rotated 30 degrees relative to its center;
The third rectangle div moves 1.5 PX relative to its original position, and scales up times along the X axis and Y axis;
The fourth rectangular div is flipped 30 degrees and 20 degrees on the X axis and Y axis respectively;
Here, the displacement, rotation, and flip of the function, each function has its own default relative position, which is also in line with our perceptual knowledge. To modifyRotateThe base point position of the element, which can be defined using the transform-origin function;
Format: transform-origin: 20% 40% (note that there are no parentheses or ); it indicates that the relative deflection position follows the previous position and moves 20% and 40% along the X axis and Y axis. W3c this page is a good demonstration of http://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html

The default position is to rotate according to the center of the element, that is, the default position.Transform-origin: 50% 50%;You can also use transform-origin: top left; transform-origin: bottom right.
 
A browser compatibility problem: the new version of the browser seems to support the transform-defined 2D conversion. To prevent compatibility problems with the old version of the browser (Chrome and Safari require prefix-webkit -), browser compatibility is required, because you never know how old browsers visitors use!
IE browser:-ms-transform:
Chrome and Safari:-webkit-transform:
Operabrowser:-o-transform:
Firefox:-moz-transform: