I have seen countless beautiful scenery, which is not as good as your review.

Transform transform

2D transformation is the operation of elements in a plane. Elements can be displaced, rotated, or stretched horizontally or vertically

1,transform: none; Default value

2,transform: translate()； The unit of movement and translation is px

By default, the x axis is horizontal and positive to the right.

By default, the y axis is vertical and positive downward, which is different from the traditional mathematical coordinate system.

1 value, translation. The default is X-axis movement. The unit can be%. This% is its own, not the parent element

2 values} define 2D translation movement

translateX(200px) moves from the current element position according to the parameters given by the X-axis

translateY(200px) moves from the current element position according to the parameters given by the Y-axis

3,transform: rotate()； The unit of rotation is deg DEG deg degrees

transform : rotate(30deg)； The default is to rotate according to the Z axis. Positive values turn clockwise and negative values turn counterclockwise

transform : rotateX(30deg)； According to the parameters given by the X-axis, rotate from the current element position and shorten the visual up and down direction

transform : rotateY(30deg)； Rotates from the current element position according to the parameters given by the Y axis. Visually, the left and right directions are shortened

Two values, transform: rotateX(30deg) rotateY(30deg);

4,transform: scale()； Scale ＾ no units ＾ default is 1

transform : scale(2)； The default is to scale X and Y at the same time. If it is negative, it is flipped before scaling

transform : scaleX(2)； Define the scale conversion by setting the value of the X axis,

transform : scaleY(3)； Define the scale conversion by setting the value of the Y axis.

transform : scale(2,5)； Define 2D scaling.

transform : scaleX(2)   scaleY(3) ； The size of the increase or decrease of the element depends on the parameters of width (X axis) and height (Y axis)

5,transform: skew()； The unit of inclination is deg

transform:skew(30deg)； The default is X-axis tilt.

transform : skewX(30deg)； The tilt conversion is defined by setting the value of the X axis. At this time, the visual effect height remains unchanged and the left and right are stretched

transform : skewY(30deg)； The tilt conversion is defined by setting the value of the Y-axis. At this time, the width remains unchanged and stretched up and down

transform : skew(30deg,130deg)； Define 2D tilt

transform : skewX(30deg)  skewY(130deg)  ；

6,transform: matrix()； Matrix

7,transform: perspective()； Depth of field ， sight distance ， in px

Depth of field is used to set the distance between the user's eyes and the element. The larger the value, the farther the distance, and the change of the element is not obvious. Negative values cannot be given

8. Conversion base point

Change the position of the element base point transform origin

Its main function is to let us change the base point position of the element before performing the transform action.

A. Transform origin (x, y): used to set the base point (reference point) of the element's motion. The default point is the center point of the element. The values of X and y can be percentages, em,px, and X can also be character parameter values left,center,right; Y is the same as X. In addition to the percentage value, you can also set the character values top, center and bottom.

B,transform-origin(X，Y，Z)； The setting of Z axis can only be numeric.

For example, top left is based on the upper left corner

9. Multiple function

If multiple functions are set for an element, such as translation and rotation, pay attention

Translation before rotation

Pan then zoom

3D properties

1.transform-style: flat | preserve-3d； Specifies how nested elements are rendered in 3D space

Flat: the flat value is the default value, indicating that all child elements are rendered in the 2D plane

preserve-3d: indicates that all child elements are rendered in 3D space.

Note: the transform style attribute needs to be set in the parent element and higher than any nested deformation element

2.perspective: 200px； Depth of field

Used to set the distance between the user and the Z plane of the element 3D space. The effect is determined by his value. The smaller the value, the closer the user is to the Z plane of 3D space, and the more impressive the visual effect is; On the contrary, the larger the value, the farther the user is from the Z plane of 3D space, and the visual effect is very small.

3.perspective-origin

It is another important attribute in 3D deformation, which is mainly used to determine the source point angle of the perspective attribute

Attached cube code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section{
            width: 400px;
            height: 400px;
            /* background-color: turquoise; */
            margin: 200px auto;
            position: relative;
            transform: rotateX(30deg) rotateY(20deg);
            transform-style: preserve-3d;
        }
        div{
            width: 400px;
            height: 400px;
            font-size: 200px;
            font-weight: 900;
            line-height: 400px;
            text-align: center;
            position: absolute;
            opacity: 0.6;
        }
        .div1{
            transform: translateZ(200px);
            background-color: pink;
        }
        .div2{
            transform: translateZ(-200px) rotateY(180deg);
            background-color: rgb(124, 36, 224);
        }
        .div3{
            transform: translateY(200PX) rotateX(90deg);
            background-color: rgb(211, 115, 123);
           
        }
        .div4{
            transform: translateY(-200PX) rotateX(90deg);
            background-color: rgb(109, 74, 109);
           
        }
        .div5{
            transform: translateX(200px) rotateY(90deg);
            background-color: rgb(130, 202, 130);
        }
        .div6{
            transform: translateX(-200px) rotateY(-90deg);
            background-color: rgb(109, 154, 175);
        }
    </style>
</head>
<body>
    <section>
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
        <div class="div5">5</div>
        <div class="div6">6</div>
    </section>
</body>
</html>