The Transform properties

In CSS3, the transformation of the spatial position of the user element in the transfrom attribute. The images shown in the results of this article are based on the transformations shown below

2 d transformation

Matrix

  • The transformation matrix of 3 by 3
  • You convert a two-dimensional vector

    Where x1 and y1 are vectors transformed by Matrix. According to the formula, e and f in the Matrix are mainly used to set the translation of elements on the X-axis and Y-axis. A and D are mainly used to set the scale of elements on the X and Y axes. A, B, C, and D are used to set the rotation of elements in the XY plane.Rotate /translate/screw can be directly set to Matrix to achieve the same effect

translate

  • Sets the translation of an element on either the X or Y axes 
    translate(15px, 25px)      The element is shifted 15px along the X axis and 25px along the Y axis
Matrix(1, 0, 0, 1, 15, 25) # same effect
Copy the code

scale

  • Sets the scale of the element on the X or Y axis 
    Scale (2, 0.5)The element is stretched twice on the X-axis and shrunk twice on the Y-axis
Matrix(2, 0, 0, 0.5, 0, 0) # same effect
Copy the code

  • When scale is negative, the element reverses in the corresponding direction

rotate

  • Rotate in two dimensions is rotating around the screen normal vector, which is the same thing as rotateZ 
    rotate(30deg)                         Rotate 30 degrees clockwise around the screen normal vector
Matrix(0.866, 0.5, -0.5, 0.866, 0, 0) Sin(30) ≈ 0.866
Copy the code

skew

  • Set the X – and Y-axis tilts

transform-origin

Transform origin

  • The default value is (50%, 50%, 0), that is, the default transformation origin is located at the center of the XY plane of the transformation element Z=0
  • Values for (< length > | < percentage > | left | center | right, < length > | < percentage > | top | center | bottom,

    ) three parameters from left to right represent the offset on the left side of the transformation origin phase box model, the offset on the top of the box model, and the z-axis offset respectively
rotate(30deg);
Copy the code
rotate(30deg);
transform-origin: 'left top';
Copy the code


Set transform-Origin to rotate the element around the upper left corner when it sits on a point

Transform Execution sequence of each transformation

The rotation and translation transformations take place simultaneously

transform: translateX(100px) rotate(90deg);
Copy the code

The result is shown below. You can see that the yellow box was first moved 100px along the X-axis and then rendered 90 degrees clockwise around the Z-axis. Therefore, in transform, each transformation is executed from left to right

transform:  rotate(90deg) translateX(100px);
Copy the code

Next, we reverse the two transformations in the transform in order, and the result is shown in the figure below. You can see that the yellow box is rotated 90 degrees around the Z-axis and then moved 100px in the positive X-axis.

Matrix operation

As can be seen from the previous chapter, the transformation matrix translateMat of translateX(100px) in this chapter is


Rotate (90deg) corresponds to the transformation matrix rotateMat


Perform matrix product operations on translateMat and rotateMat, and import the results into the transform property to view the results

  1. RotateMat * translateMat results are

The CSS code is transform: matrix(0, 1, -1, 0, 0, 0), and the running result is as shown below. It can be seen that the transformation effect of matrix equal to rotateMat * translateMat is equivalent to transform: rotate(90deg) translateX(100px);

3 d transform

CSS3 three-dimensional world coordinate system is shown in the figure below, using the left hand coordinate system, Y-axis down the screen

perspective

  • Perspective defines the distance between 3D elements and views. Set the distance from the perspective lens to the XY plane

    Perspective Sets the distance from the perspective point to the screen and (Z=0 plane in XYZ space), i.e. (0, 0, 150px)

    <! DOCTYPE html> <html> <head> <style>#div1
        {
            position: relative;
            height: 150px;
            width: 150px;
            margin: 50px;
            padding:10px;
            border: 1px solid black;
            -webkit-perspective:150; /* Safari and Chrome */ Perspecctive 150px
        }
        
        #div2
        {
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            -webkit-transform: rotateX(45deg); /* Safari and Chrome */
        }
        </style>
    </head>

    <body>
        <div id="div1">
          <div id="div2">HELLO</div>
        </div>
    </body>
</html>
Copy the code

    Results:

    Set the perspective to 1500px and the result is:

    The value of the Perspective is independent of the size of the element rendered; the perspective represents the distance from the perspective point to the element; the further the perspective point, the worse the perspective effect

  • The element with the perspective attribute is added and the z-axis appears in the scene, so its children get the 3D effect, including translateZ and rotateY/rotateX

translateZ

  • By adding the translateZ attribute to the Transform, you can translate an element on the Z-axis
    1. Add translateZ to the Transform property on the child element that adds the Perspective element 
      <! DOCTYPE html> <html> <head> <style>#div1
        {
            position: relative;
            height: 150px;
            width: 150px;
            margin: 50px;
            padding:10px;
            border: 1px solid black;
            -webkit-perspective:150; /* Safari and Chrome */ Perspecctive 150px
        }
        
        #div2
        {
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            -webkit-transform: translateZ(-50px) rotateX(45deg); /* Safari and Chrome */
        }
        </style>
    </head>

    <body>
        <div id="div1">
          <div id="div2">HELLO</div>
        </div>
    </body>
</html>
Copy the code

      Add translateZ(-50px) to the element with id=div2, which translates the element 150px along the negative z-axis, resulting in:

      The 3d coordinate system in CSS3 adopts the left hand coordinate system, and the Z axis is vertical to the screen. Therefore, after the translation of DIV2 50px along the negative axis of Z axis, the elements in DIV2 are actually located 50px behind the screen, so it looks smaller

rotateY/rotateX

  • RotateY and rotateX can set elements to rotate clockwise around the Y or X axes 
    rotateY(45deg) Rotate 45 degrees clockwise around the Y-axis
rotateX(-45deg) # Rotate 45 degrees counterclockwise around the z-axis
Copy the code

Matrix3D

  • TODO