“This is the 14th day of my participation in the First Challenge 2022.

transform

What is a transform?

Transform can rotate, scale, move, or tilt 2D or 3D elements. The syntax is as follows. None is the default value, and the rest is transformed by the provided transform function

img {
    transform: none|transform-functions
}
Copy the code

The technical details

  1. For rotated elements, the box model position will not change. There are now two pairs of ice blocks and snow rongrong on the page. Transform is the default

Now we provide additional transfrom the first picture to the right 200 pixels, the effect is as follows, we will find the position of the second image has not changed, that means what, as we all know the default document in the document flow from left to right, from top to bottom so that shows the transform does not change the position of the box model, we The box model placeholder has not changed

  1. Create a cascading context

    After we append transfrom to the element, it creates a cascade. As you can see from the image above, the attached image overlays the second image

  2. The inline element attribute is invalid

    Inline Elements We all know that there can be more than one inline element in a row. The next three are inline elements, block elements, and replace elements. We shifted them 20 pixels to the right, but what happened? The SPAN element is not moved, and the rest is shifted 20 pixels to the right

    <span style="transform: translateX(20px);" <div style="transform: translateX(20px); "> <img SRC ="./01-bdd-" PNG "Alt ="" style="transform: translateX(20px); >Copy the code

  1. Different setting sequence different display effect

    When we attach the same effect to the same element but in a different order, will the final effect be the same? Here we take the same image, one is reduced by half and then moved 100 pixels to the right, and the other is moved 100 pixels to the right and then reduced by half.

    <div> <img SRC ="./01-bdd- 新 新. PNG "Alt ="" style="transform: scale(0.5) translateX(100px); "> </div> <div> <img SRC ="./01-bdd- 新 代. PNG" Alt ="" style="transform: translateX(100px) scale(0.5); > </div>Copy the code

From the effect of the picture, the final effect is not the same when the same value is applied in different order.