CSS3 animation production learning (1)_html/css_WEB-ITnose

CSS3 animation production has three attributes: transform (deformation), transition (conversion), and animation (animation). I have time to learn transform today. After all, I have encountered it recently and I feel Isn’t this still bad?

This is mainly a place where I record my studies. I will check many people’s blogs and so on, and I will list them. It is not for plagiarism.

http://www.w3cplus.com (w3cplus is a very good website, please check it out if you like the original flavor)

Transform literally means deformation.

1. Rotate:

Is this a function? You need an angle parameter, such as: 45deg. When the angle is positive, it means clockwise rotation, and when it is negative, it means reverse rotation. The hour hand rotates, and if you are careful at this time, you will definitely find what is its rotation point? In fact, the default is the center point. If you want to specify this point, use transform-origin, such as: transform-origin: 20% 30%; like this. (How do you find out that if there is a block element behind, then the rotated element is equivalent to position:absolute; and set z-index, press the following element below, come back and take a look)

2. translate (Move)

Translate is divided into three situations: translate(x, y) moves both horizontally and vertically, translateX(x) moves horizontally, and translateY(y) moves vertically. The default base point is the center point of the element, but you can also set it via transform-origin. eg. transform: translate(100px, 20px); Remember, these are all functions! ! ! ! !

3. scale (zoom)

scale(x,y) makes the element scale horizontally and vertically at the same time (that is, the X-axis and Y-axis scale at the same time); scaleX(x) element Only scales in the horizontal direction (X-axis scaling); scaleY(y) elements only scale in the vertical direction (Y-axis scaling), but they have the same scaling center point and base. The center point is the center position of the element, and the scaling base is 1. If its value is greater than 1, the element will be enlarged; otherwise, if its value is less than 1, the element will be reduced.

4. Skew (distortion)

skew(x,y) causes the element to twist in the horizontal and vertical directions at the same time (the X-axis and the Y-axis are twisted and deformed according to a certain angle value at the same time); skewX(x) only distorts the element in the horizontal direction (X-axis distortion); skewY(y) only distorts the element in the vertical direction (Y-axis distortion).

5. matrix (matrix)

matrix(, , , , , ) : Specify a 2D transformation in the form of a six-value (a, b, c, d, e, f) transformation matrix, which is equivalent to directly applying a [a b c d e f] transformation matrix. It is to reposition the element based on the horizontal direction (X axis) and vertical direction (Y axis). This attribute value uses a matrix involving mathematics. This is just a matter of mathematics. I will explain it later when it is used, but I don’t think it will be used anymore.

The base points mentioned above are all center points and can only be transformed through transform-origin.

1. top left | left top is equivalent to 0 0 | 0% 0%

2. top | top center | center top is equivalent to 50% 0

3. right top | top right is equivalent to 100% 0

4. left | left center | center left is equivalent to 0 50% | 0% 50%

5. center | center center is equivalent to 50% 50% (default value)

6. right | right center | center right is equivalent to 100% 50%

7. bottom left | left bottom is equivalent to 0 100% | 0% 100%

8. bottom | bottom center | center bottom is equivalent to 50% 100%

9. bottom right | right bottom is equivalent to 100% 100%

In fact, this stuff is just learning. After all, CSS3 is gaining popularity among the people. As a person who works on the front end, you should understand that although it may not be fully used, by the time it is used, it may be said that he has already used it. When a technology becomes popular all over the world, it will be too late for you to learn it. Therefore, we must do the right thing at the right time. (I’m talking nonsense)

(I finally updated the transform. It’s so painful to write a blog. This is still a bit of direct appropriation. I pay tribute to the predecessors!! Get in touch, to be continued... ..)