CSS3 Moving Properties

This article mainly introduces the CSS3 Learning series of mobile properties in detail, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

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.