Detailed explanation of css3 transform attribute and summary of transform usage

HTML5 and CSS3 have developed rapidly in recent years. There are many big and cool websites at home and abroad using the latest technologies. The browsers of various manufacturers are becoming more and more compatible with them. There is a powerful property Transform in CSS3. With this feature, various special effects can be easily achieved. To quote a lyric, "Spinning, jumping, I won't stop." From the literal meaning, Transform means transformation. Its values ​​mainly include rotation, skew, scale, translation and matrix transformation matrix. The following content will talk about this important property in CSS3.

First of all, you can learn free courses related to PHP Chinese website

1. Watch"CSS3 3D Special Effects Video Tutorial"中transform attribute

#2. Learn CSS3 transform tutorial in "CSS3 From Beginner to Mastery Tutorial"

transform attribute

1. About How to implement the 2D plane transformation attribute transform of CSS3 elements

The shape transformation of CSS3 allows us to stretch, scale, etc. In this article, I mainly talk about the 2D plane transformation attribute transform that can be transformed. Transform is Transformation means and it is mainly used through functions. There are the following functions translate() Translation transformation ratate() Rotation transformation scale() Scale transformation skew() Oblique transformation matrix() Matrix transformation transform-origin rule defines the center translation transformation of the transformation.

2. Detailed introduction to the transform attribute in css3 to achieve vertical and horizontal centering of divs with variable width and height

The compatibility of transform is relatively optimistic. It is not compatible below IE9. IE9 supports the alternative -ms-transform attribute but only supports 2D conversion.

Google and Safari support the -webkit-transform attribute instead. IE9 and above, Firefox and Open are compatible.

I believe that in actual projects, you will definitely encounter the problem of p's variable width and height, vertical and horizontal centering. I remember that I used js to implement it before.

In fact, there are several ways to implement it with css. But I personally think it is simpler and more convenient to use transform, but it is not compatible with browsers below IE9.

3. Detailed examples of the differences between the transform, transition and animation properties in CSS3

In some test cases, the transform attribute is often demonstrated, and it looks like All with animation. This makes a small number of people with intuitive thinking think that the transform attribute is an animation attribute. On the contrary, the transform attribute is a static attribute. Once written into the style, its effect will be displayed directly without any change process. The main purpose of transform is to make special deformations of elements, which is not unfamiliar to designers. Simply put, it is a CSS graphic deformation tool.

4. Detailed introduction to css transformation transform attribute

transform: transformation

Rotation: rotate(): degree

Bevel cut :skew(): degree

skewX

skewY　

Scale: scale(): positive number, negative number, decimal

scaleX

scaleY

Displacement: translate(): All units supported by css can be used

translateX

translateY　

Execution order of transform: those written last are executed first

transform: scale(2) rotate(50deg); Perform rotation first, then perform scaling

5. Transform attribute in CSS

In CSS The transform property allows you to modify the coordinate space of a CSS visual model. Through transform, elements can be moved (translate), rotated (rotate), scaled (scale), and tilted (skew).

If this property has a non-none value, a stacking context will be generated. In this case the object will serve as a containing block for the position: fixed element it contains.

6. The impact of CSS3 transform on HTML document flow

After adding the transform attribute to body (or html), the entire body DOM will undergo corresponding transformations, but the "whole" at this time only refers to the standard document flow elements under the body. For those position: absolute; / position: The fixed; element, because it has been separated from the document flow to which the body belongs, cannot naturally achieve the corresponding transformation effect by relying on the transformation of the body.

Related Questions and Answers

1. Transform Why two elements are needed to create a scrolling effect

2 . Why does the initial display:block of transition transform have no movement effect?

3. How can CSS3 transform achieve center rotation?

【Related recommendations】

1. PHP Chinese website free video tutorial: "php.cn Dugu Jiujian (2)-css video tutorial"

2. PHP Chinese website free video tutorial: css3 video tutorial to achieve smooth transition effect on web pages

The above is the detailed content of Detailed explanation of css3 transform attribute and summary of transform usage. For more information, please follow other related articles on the PHP Chinese website!