A, CSS3 conversion
Achieved by conversion of the movement, the effect of stretching elements for rotation, scaling; this effect must be the original image or by JS processing can be achieved, it can now be accomplished by CSS3. 2D conversion using transform properties to achieve the effect.
transform values:
- translate () Mobile
- rotate () rotation
- scale () Zoom
- skew () tilt
- matrix () combines all the 2D conversion method.
translate () method
By translate () method, the element is moved from its current position, according to a given left (x-coordinate) and the top (y coordinate) location parameters
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -moz-transform:translate(50px,100px); / * Firefox * / -webkit-Transform : Translate (50px, 100px) ; / * Safari and the Chrome * / -o-Transform : Translate (50px, 100px) ; / * Opera * / } </ style > </ head > < body > < div > hello. This is a div element. </ Div > < div ID = "Div2" > Hello. This is a div element. </ Div > </ body > <>
Value translate (50px, 100px) moves the element from the left 50 pixels, 100 pixels from the top of the mobile.
rotate () method
() Is rotated a given angle by a rotate method, element clockwise. Allow negative element rotates counterclockwise.
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { /*transform:translate(50px,100px);*/ transform: rotate(30deg); } </style> </head> <body> < Div > Hello. This is a div element. </ Div > < div ID = "Div2" > Hello. This is a div element. </ Div > </ body > </ HTML >
scale () method
By scale () method, the size of the element will increase or decrease, (X-axis) and height (Y-axis) parameters given width
Value scale (2,4) is converted to the width 2 times the original size, the height is converted to four times the original height
< Style > div { width : 100px ; height : 75px ; background-Color : Yellow ; border : 1px Solid Black ; } div # Div2 { / * Transform: Translate (50px, 100px); * / / * Transform: Rotate (30deg ); * / Transform : Scale (1,2) ; } </ style > </ head > < body > < div > Hello. This is a div element.</ Div > < div ID = "Div2" > Hello. This is a div element. </ Div > </ body > </ HTML >
skew () method
By skew () method, flip element given angle, according to a given horizontal line (X-axis) and vertical lines (Y-axis) parameters
In fact, the principle of deformation of the skewX () method is such that: Since I element defines a height 100px, while the skewX () is inclined along the X-axis direction. Therefore, as long as the inclination angle is not 180 °, the element will remain 100px height. Meanwhile, in order to maintain an inclined, elongated itself only along the X axis.
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 {margin: 100px; /*transform:translate(50px,100px);*/ /*transform: rotate(30deg);*/ /*transform: scale(1,2);*/ transform: Skew (30deg, 30deg) ; } </ style > </ head > < body > < div > Hello. This is a div element. </ Div > < div ID = "Div2" > Hello. This is a div element. </ Div > </ body > </ HTML >
matrix () method
matrix () method to combine all the 2D conversion method.
matrix () method requires six parameters including math functions that allow you to: rotate, zoom, and tilt the mobile element.
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 {margin: 100px; /*transform:translate(50px,100px);*/ /*transform: rotate(30deg);*/ /*transform: scale(1,2);*/ /*Transform: skew (6 deg, 6 deg); * / Transform : Matrix (0.866,0.5, -0.5,0.866,0,0) ; } </ style > </ head > < body > < div > Hello. This is a div element. </ Div > < div ID = "Div2" > Hello. This is a div element. </ Div > </ body > </ HTML >
