"Demo" CSS3 2D Conversion

Conversion:

The method of transformation:

• Translate ()
• Moves from the current element position according to the parameters given at the left (x-axis) and top (Y-axis) positions.

  
  
  -webkit-transform:translate (50px,100px); /* Safari and Chrome */}

< Span class= "Hl-number" > < Span class= "hl-reserved" > < Span class= "Hl-code" > translate value (50px , 100px) is a 50 pixel move from the left element and 100 pixels from the top.

• Rotate ()
• The element that rotates clockwise in a given degree. Negative values are allowed so that the elements are rotated counterclockwise.

  
  
  -webkit-transform:rotate (30DEG); /* Safari and Chrome */}

The rotate value (30deg) element rotates 30 degrees clockwise.

• Scale ()

The scale () method, which increases or decreases the size of the element, depends on the width (x-axis) and height (y-axis) parameters:

Transform:scale (2,3); /* Standard Syntax */

The scale (2,3) transition width is twice times the original size, and its original size is 3 times times the height.

• Skew ()

Transform:skew(<angle>[,<angle;]);      

Contains two parameter values that represent the angle of the x-axis and y-axis skew, and if the second parameter is empty, the default is 0, and the parameter is a negative representation that tilts in the opposite direction.

• Skewx (<angle>); indicates that only the x-axis (horizontal direction) is tilted.
• Skewy (<angle>); indicates that only the y-axis (vertical direction) is tilted.

-webkit-transform:skew (30DEG,20DEG); /* Safari and Chrome */}

The skew (30deg,20deg) element tilts 20 degrees 30 degrees on the x-axis and the y-axis.

• Matrix ()

The matrix () method and the 2D transform method are combined into one.

The matrix method has six parameters, including rotation, zoom, move (pan), and tilt.

Use the Matrix () method to rotate the div element 30°

div {Transform:matrix (0.866,0.5,-0.5,0.866,0,0);

-webkit-transform:matrix (0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */}

Transform-origin Property

Set the base point position of the rotated element:

Div{transform:rotate (45deg); transform-origin:20% 40%;-ms-transform:rotate (45DEG);/* IE 9 */-ms-transform-origin:20 % 40%; /* IE 9 */-webkit-transform:rotate (45deg); /* Safari and Chrome */-webkit-transform-origin:20% 40%; /* Safari and Chrome */}

Syntax Transform-origin: X-axis Y-axis Z-axis;

value	Description
X-axis	Defines where the view is placed on the X-axis. Possible values: Left Center Right Length %
Y-axis	Defines where the view is placed on the Y axis. Possible values: Top Center Bottom Length %
Z-axis	Defines where the view is placed on the Z axis. Possible values: Length

Conversion method

function	description
Matrix ( n , n , n , n , n , n )	defines a 2D conversion, using a matrix of six values.
Translate ( x , y )	to define 2D transformations, moving elements along the x and Y axes.
TranslateX ( n )	defines the 2D transformation, moving elements along the X-axis.
translatey ( n )	defines the 2D transformation, moving elements along the Y axis.
Scale ( x , y )	defines the 2D scaling transformation, changing the width and height of the element.
ScaleX ( n )	defines the 2D scaling transformation, changing the width of the element.
ScaleY ( n )	defines the 2D scaling transformation, changing the height of the element.
rotate ( angle )	defines the 2D rotation, which specifies the angle in the parameter.
skew ( x-angle , y-angle )	defines a 2D tilt transition along the x and Y axes.
skewx ( angle )	defines a 2D tilt transition along the X-axis.
skewy ( angle )	defines a 2D tilt transition along the Y-axis.

"Demo" CSS3 2D Conversion