Learn about 2D transformations

Transformation movement:

transform: translate(X, Y); simultaneously moves the distance of the element in the horizontal and vertical directions, separated by commas.

transform: translateX(); only moves the distance of the element in the horizontal direction

transform: translateY(): only moves the distance of the element in the vertical direction

For example:

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate(200px,200px);
            
        }
    </style>
</head>
<body>
    <div></div>
</body>

We set the movement of the div box. When running, we can find that the div box has moved 200px in both the horizontal and vertical directions.

transform: translateX(); only moves the distance of the element in the horizontal direction

For example:

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translateX(200px);

        }
    </style>
</head>
<body>
    <div></div>
</body>

In this way, the div box only moves 200px in the horizontal direction.

transform: translateY(): only moves the distance of the element in the vertical direction

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translateY(200px);

        }
    </style>
</head>
<body>
    <div></div>
</body>

The div box only moved 200px in the vertical direction.

Transformation of rotation

transform: rotate (deg); what follows in the brackets is the degree.

For example:

    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

We rotate the div box 45 degrees clockwise

The rotation attribute also has a common attribute: transform-origin transformation center point. This is what sets the center point when the element is rotated.

1.transform-origin: X Y; separated by spaces

2. It can be followed by locative nouns. The default is 50% 50%.

3. Can be px pixels.

Transformation scaling

transform: scale (X, Y); what follows is a number, not a unit, which means a multiple.

For example:

    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transform: scale(2,2);
        }
    </style>
</head>
<body>
    <div></div>
</body>

In this way, the size of the div box is expanded by 2 times.

Comprehensive writing sequence for 2D conversion;

When we have both displacement and other properties: we need to put the displacement first.

Learn about 2D transformations

Guess you like