Rotation of 2D conversion, transform origin of 2D conversion center point and scale of 2D conversion

Catalog

One .2D The rotation of transformation rotate

Two .2D Convert center point transform-origin

3、 ... and .2D Scaling of transformation scale

---

One .2D The rotation of transformation rotate

2D Rotation refers to making the element rotate clockwise or counterclockwise in the plane

1. grammar

   transform:rotate( Degrees ）

2. a key

rotate It's the same as the degree , The unit is deg such as rotate(45deg)

The angle is timing , Clockwise , Negative time , For counter clockwise

The default center point of rotation is the center point of the element

Two .2D Convert center point transform-origin

      We can set the center point of element transformation

1. grammar

    transform-origin:X Y;

2. a key

Note the following parameters X and Y Use spaces separate

XY The center point of the default transformation is the center point of the element （50% 50%）

Can also give x y Set pixel or orientation nouns （top bottom left right center）

3、 ... and .2D Scaling of transformation scale

    Zoom is to zoom in and out , As long as you add this attribute to an element, you can control whether it zooms in or out

1. grammar

  transform:scale(x,y)

2. Be careful

Among them x and y Separated by commas

transform:scale(1,1)    Double the width and height , It's equivalent to no magnification

transform:scale(2,2)    Both width and height are enlarged 2 times

transform:scale(2)    Just write one parameter , The second parameter is the same as the first parameter , amount to scale（2,2）

transform:scale(0.5,0.5)  narrow

scale The biggest advantage of ： You can set the conversion center point scaling , By default, it is zoomed with the center point , And it doesn't affect the other boxes

Four .2D Conversion synthesis

1. Using multiple transformations at the same time , The format for ：transform:translate() rotate() scale()... etc.

2. The order affects the effect of the conversion .（ First rotate and change the orientation of the coordinate axis ）

3. When we have displacement and other properties at the same time , Remember to put the displacement first

5、 ... and .2D Conversion summary

1. transformation transform Our simple understanding is deformation , Yes 2D and 3D Points

2.2D Move translate(x,y) The biggest advantage is that it does not affect other boxes , The internal parameters are %, Is calculated relative to its own width and height

3. You can write it separately translateX(x) and translateY(y)

4.2D rotate rotate( Degrees )  You can rotate elements   Degree units are deg

5.2D The zoom scale(x,y) The parameters are numbers, not units It can be a decimal The biggest advantage is that it does not affect other boxes

6. Set the conversion center point trans-origin:x y;  Parameters can be percentages , Pixel or noun of position

7. When we write comprehensively , When there are displacement and other properties at the same time , Remember to put the displacement first