1. 2Dconversion

  • A 2D transformation changes the position and shape of a label on a two-dimensional plane

  • Transform is one of the subversive features in CSS3, which can realize the displacement, rotation, deformation and scaling of elements.

    • Mobile: translate

    • Rotation: rotate

    • Zoom: scale

    • Tilt: skew

1.1. Two-dimensional coordinate system

2D transformation is a technique to change the position and shape of a label on a two-dimensional plane. First, learn the two-dimensional coordinate system

2. 2DConversion oftranslate

2D movement is a feature within 2D transformations that changes the position of elements on the page, similar to positioning.

2.1. translategrammar

  • X is the horizontal movement along the X-axis
  • Y is the horizontal movement on the y axis
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
Copy the code

2.2. Key knowledge points

  • 2DThe movement mainly refers to the horizontal and vertical direction of the movement
  • translateThe biggest advantage is that it does not affect the position of other elements
  • translateThe 100% units are calculated relative to their width and height
  • Inline labels have no effect

2.3. Code demonstration

div { background-color: lightseagreen; width: 200px; height: 100px; Transform: translate(100px, 100px); transform: translate(100px, 100px); */ /* Transform: Translate (100px, 0) */ /* Transform: translate(100px, 0) */ /* Transform: translate(100px, 0) Translate (0, 100px) */ /* Horizontal shift 100px */ /* Transform: translateX(100px); */ transform: translateY(100px)}Copy the code

3.2 d conversion rotate

3.1. The rotate rotation

  • 2DRotation refers to rotating elements clockwise or counterclockwise in a two-dimensional plane

3.2. rotategrammar

Use steps:

  • Add the transform attribute transform to the element

  • The rotate attribute is rotate. For example, transform:rotate(30deg) Rotates 30 degrees clockwise

    /* Deg */ transform: rotateCopy the code

3.3. Key points

  • rotateIt has degrees in itdeg
  • If the Angle is positive, it goes clockwise; if the Angle is negative, it goes counterclockwise
  • The default rotation center is the center of the element
  • Using the left hand rule, thumb is pointing in the positive direction

3.4. Set the center of rotation

3.4.1 track.transform-originBasic grammar

Transform-origin: x y;Copy the code

3.4.2. Important knowledge points

  • Note that the following arguments x and y are separated by Spaces
  • The center of the default rotation of x and y is the center of the element (50% 50%), equivalent tocenter center
  • You can also set pixels or azimuth nouns for x and y.top,bottom,left,right,center)

3.5. Code demonstration

img:hover {
  transform: rotate(360deg)
}
Copy the code

3.6. CSS 3 triangle

  • There are many ways to achieve trigonometry: for example, ICONS, text symbols, borders plus rotation, pure borders…
  • In daily development, icon is the most commonly used method, and text symbols are the least often used

4.2DConversion ofscale

4.1. scaleThe role of

  • Used to control the zoom in and out of elements

4.2. Grammar

transform: scale(x, y)
Copy the code

4.3. Key knowledge points

  • Notice that x and y are separated by commas
  • transform: scale(1, 1): Double the width and height, equivalent to no amplification
  • transform: scale(2, 2)The width and height have been enlarged by twice
  • transform: scale(2)If only one argument is written, the second argument is the same as the first argument
  • The transform: scale (0.5, 0.5): to reduce the
  • scaleBiggest advantage: You can set the conversion center zoom, default to center zoom, and does not affect other boxes

4.4. Code demonstration

Div :hover {/* note that the number is a multiple of the unit */ /* transform: scale(2, 2) */ /* Scale (2) */ transform: scale(0.5, 0.5)}Copy the code

5. 2DConversion synthesis and sequence problems

5.1. Key knowledge points

  • Multiple conversions are used at the same time in the formattransform: translate() rotate() scale()
  • The order will affect the effect of the transformation (rotation first will change the axis orientation)
  • But when we also have position or other properties, we want to put displacement first

5.2. Code demonstration

Div :hover {transform: translate(200px, 0) Rotate (360deg) scale(1.2)}Copy the code