Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the deformation function types of css3". The explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the deformation function types of css3".

The deformation function of css3 includes four types: 1, rotation, realized by rotate (), rotateX (), 2, scaling, realized by scale (), scaleX (), etc., 3, tilting, realized by skew (), skewX (), etc., 4, moving, realized by translate (), etc.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Deformation is mainly worth using the transform function to achieve text or picture rotation, scaling, tilting, moving these four kinds of processing.

1. Rotate-transform:rotate (xxdeg)

(these attributes are supported by browsers above IE9, safari 3.1, chrome 8, FireFox 4 and Opera 10)

Let's look at the example first:

This is a test.

# test3 {width:300px; margin: 100px auto; font-size: 40px; transform:rotate (45deg);}

Transform:rotate (45deg); this sentence means that the p element rotates 45 degrees clockwise, and deg is an angular unit. The effect is as follows:

2. Zoom-transform:scale (x)

This is a test.

# test4 {width:300px; margin: 100px auto; font-size: 40px; transform:scale (0.5);}

You can also specify the horizontal and vertical scaling of the element, respectively. For example, the element shrinks 50% horizontally and doubles vertically:

This is a test.

# test5 {width:300px; margin: 100px auto; font-size: 40px; transform:scale (0.5);}

The effects of the above two zooms are as follows:

3. Tilt: use skew method to realize the tilt processing of text or picture. The two parameters specify the tilt angle in the horizontal direction and the tilt angle in the vertical direction respectively. Example:

This is a test.

# test6 {width:300px; margin: 100px auto; font-size: 40px; transform:skew (30degence45deg);}

If there is only one parameter, it is tilted horizontally by default, not vertically.

4. Move: using the translate method, the two parameters specify the distance to move horizontally and vertically, respectively. If there is only one parameter, it only moves horizontally by default, not vertically.

This is a test.

# test7 {width:300px; margin: 100px auto; font-size: 40px; transform:translate (150px150px);}

These deformations can also be combined:

This is a test.

# test8 {width:300px; margin: 100px auto; font-size: 40px; transform:rotate (45deg) scale (0.5) skew (30degdeg45deg) translate (150px) 150px);}

Rotate the element 45 degrees clockwise, halve in size, then tilt 30 degrees horizontally, 45 degrees vertically, and move the 150px horizontally and vertically, respectively, as follows:

You can specify the base point of the deformation: when you deform with transform, it takes the center of the element as the base point. Use the transform-origin property to change the base point.

This is a test.

This is a test.

# test9 {position: absolute; width:150px; height:150px; background: green; margin: 100px 200px; font-size: 20px; transform:rotate (45deg);} # test10 {position: absolute; width:150px; height:150px; background: red; margin: 100px 200px; font-size: 20px; transform-origin:left top / * fixed datum point * / transform:rotate (45deg)}

The effect is as follows: (red pushes the base point to the upper left, green is the default)

The value of the transform-origin attribute, the first is the position of the base point in the horizontal direction of the element. The values that can be specified are: the second value of left,center,right; is the position of the base point in the vertical direction of the element, and the values that can be specified are: top,center,bottom.

Thank you for your reading, these are the contents of "what are the deformation function types of css3". After the study of this article, I believe you have a deeper understanding of what the deformation function type of css3 has, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.