This article mainly introduces the CSS3 Learning series of mobile properties in detail, the content is very good, and now share to everyone, but also for everyone to do a reference.
Transform function
Scaling down
Use the Sacle method to achieve the reduction of text or image, specify the magnification in the parameters, such as sacle (0.5) to reduce the 50%, the example is as follows:
<! DOCTYPE html>
In addition, you can specify the magnification of the horizontal direction of the element and the magnification of the vertical direction separately, for example:
<! DOCTYPE html>
Tilt
Using the skew method to skew the text or image, specify the tilt angle in the horizontal direction and the tilt angle in the vertical direction in the parameters, for example, "Skew (30deg,30deg)" means tilt 30 degrees horizontally and tilt 30 degrees vertically, as in the example below:
<! DOCTYPE html>
Rotating
Use the Rotate method to rotate the element, a parameter "angle", the unit deg to the meaning of the degree, positive number is clockwise rotation, negative number is counterclockwise rotation. Examples are as follows:
<! DOCTYPE html>
Move
Use the Translate method to move the text or image, specifying the distance between the moving distance and the vertical direction of the horizontal direction in the parameters. For example:
<! DOCTYPE html>
deform Example
Example 1:
<! DOCTYPE html>
This example is moved first, then rotated, and finally retracted.
Effect:
Example 2:
<! DOCTYPE html>
Rotate first, then indent, and finally move
Effect:
From the running results of the two examples, we can see that the elements are not in the same position on the two pages. Let's take a look at their detailed steps:
A first example:
1) first move the 150px to the right and move the 200px down.
2) then rotate 45 degrees and zoom in 1.5 times times.
A second example:
1) Rotate 45 degrees first and zoom in 1.5 times times.
2) then move the 150px to the right and move the 200px down.
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!