css3 mobile properties

This time I will bring you the mobile attribute of css3. What are the precautions for using css3 mobile attribute? The following is a practical case, let’s take a look.

transform function

Zoom

Use the sacle method to realize the scaling of text or images, specified in the parameters Zoom ratio, for example, sacle(0.5) means to reduce the size by 50%. The example is as follows:

    
    
    



示例文字

In addition, you can specify the horizontal magnification and vertical magnification of the element respectively. The example is as follows:

    
    
    



示例文字

Tilt

Use the skew method to implement tilt processing of text or images. 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 a tilt of 30 degrees in the horizontal direction and a tilt of 30 degrees in the vertical direction. The example is as follows:

    
    
    



示例文字

Rotation

Use the rotate method to rotate the element. There is one parameter "angle". The unit deg means degrees. Positive numbers mean clockwise rotation, and negative numbers mean counterclockwise rotation. Examples are as follows:

    
    
    



示例文字

Move

Use the translate method to move text or images, and specify the horizontal movement in the parameters. distance and vertical movement distance. For example:

    
    
    



示例文字

Deformation example

Example 1:

    
    
    



示例文字

This example is to move first, then rotate, and finally put Shrink

Effect:

Example 2:

    
    
    



示例文字

Rotate first, then scale, and finally move

Effect:

#We can see from the running results of the two examples that the elements are not in the same position on the two pages. Let’s take a look at their detailed steps:

First example:

1) First move 150px to the right and 200px down.

2) Then rotate 45 degrees and magnify 1.5 times.

Second example:

1) First rotate 45 degrees and magnify 1.5 times.

2) Then move 150px to the right and 200px down.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of Selector in CSS

Detailed explanation of the special usage skills of CSS margin

The above is the detailed content of css3 mobile properties. For more information, please follow other related articles on the PHP Chinese website!