2D animation effects in CSS3 (dry)

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

2 d displacement

The translate() function is used to move elements in a specified direction, similar to relative in position. Translate () moves elements without affecting other elements on the X or Y axis.

Translate (tx) or translate(tx, TY)Copy the code

Tx: indicates the offset of the X-axis movement. When the value is positive, the element moves to the right of the X-axis. When it is negative, the element moves to the left of the X-axis.
Ty: indicates the offset of the Y axis. When the value is positive, the element moves down the Y-axis. If it is negative, the element moves up the Y axis.

The above functions can also be divided into:

The translateX(tx) function: used to move only in the X-axis direction.
The translateY(TY) function: used to move only in the Y direction.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>2 d displacement</title>
    <style>
        .container div {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .container div:nth-child(1) {
            background-color: aqua;
        }
        .container div:nth-child(2) {
            background-color: blueviolet;
            /* Translate (tx,ty) function * action - translate the specified element * argument * tx - horizontal translation * ty - vertical translation * effect - relative to position */
            transform: translate(100px.100px);
        }
        .container div:nth-child(3) {
            background-color: rgb(104.95.112);

        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <div></div>
        <div id="box"></div>
    </div>
    <script>
        var box = document.getElementById('box')
        var x = 0;

        var t =setInterval(function(){
            if (x >= 800) {
                clearInterval(t);
            }else {
                box.style.transform = 'translate(' + x + 'px)'; x++; }},10);
        
    </script>
</body>
</html>
Copy the code

2 d scaling

The scale() function is used to scale elements based on the central origin, with a default value of 1. If the value is in the range of 0.01 to 099, it indicates narrowing. If the value is greater than 1, magnification is indicated.

Scale (sx) or scale(sx, SY)Copy the code

SX: represents the scale vector of the X axis.
Sy: indicates the scale vector of the Y-axis.

The above can be divided into:

ScaleX (Sx) function: used for scaling only in the X direction.
ScaleY (SY) function: used for scaling only in the Y direction.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>2 d scaling</title>
    <style>
        .container div {
            width: 200px;
            height: 200px;
            display:inline-block ;
        }
        .container div:nth-child(1) {
            background-color: aqua;
        }
        .container div:nth-child(2) {
            background-color: blueviolet;
            /* The scale() function in CSS scales around the center of the element */
            transform:scale(0.5.0.5); }.container div:nth-child(3) {
            background-color: rgb(104.95.112);
            transform: scale(1.5.1.5);
        }
        .container div:nth-child(4) {
            position: relative;
            left: 200px;
            background-color: rgb(28.28.29);
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div id="box"></div>
    </div>
    <script>
        /* Dynamic scaling with js */
        var box = document.getElementById('box')
        var x = 0 , y = 0;

        var t = setInterval(function(){
            if (x >=1 ||y >= 1 ) {
                clearInterval(t);
            } else {
                box.style.transform = 'scale(' + x + ', ' + y +') ';
                x+= 0.01,y+= 0.01; }},10);
    </script>
</body>
</html>
Copy the code

2 d rotation

The rotate() function is used to rotate elements around the origin by a specified Angle. This function is mainly used for rotation in 2D space. If the Angle value is positive, it indicates clockwise rotation. If the Angle value is negative, it indicates counterclockwise rotation.

rotate(angle)
Copy the code

Angle: indicates the rotation Angle, in deg.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>2 d rotation</title>
    <style>
        .container div {
            width: 200px;
            height: 200px;
            display:inline-block ;
        }
        .container div:nth-child(1) {
            background-color: aqua;
        }
        .container div:nth-child(2) {
            background-color: green;
            /* rotate(Angle) function * Action - Implements the specified element rotation * effect - rotates around the center of the element * argument * Angle - indicates the Angle of rotation * Note * If the Angle is 0 degrees - no rotation occurs * If the Angle is positive - Represents clockwise rotation * if the Angle is negative - represents counterclockwise rotation */
            transform: rotate(45deg);
        }
        .container div:nth-child(3) {
            background-color: aqua;
            / * note: The rotate() function is different from the translate() and scale() functions. * rotateX() and rotateY() functions cannot use * rotateX() alone * /
            transform: rotateX(30deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
</body>
</html>
Copy the code

2 d tilt

The skew() function is used to skew an element at an Angle around its center around the X and Y axes. Unlike the rotate() function, the rotate() function simply rotates without changing the shape of the element. Skew does not rotate, but only changes the shape of the element.

Skew (AX) or Skew (ax, ay)Copy the code

Ax: indicates the Angle at which the X axis is tilted.
Ay: indicates the Angle of Y-axis tilt.

The above functions can be divided into:

SkewX (AX) function: Used for skew only in the X-axis direction.
SkewY (ay) function: Used to tilt only in the Y-axis direction.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>2 d tilt</title>
    <style>
        .container div {
            width: 200px;
            height: 200px;
            display:inline-block ;
        }
        .container div:nth-child(1) {
            background-color: aqua;
        }
        /* Set the tilt Angle */
        .container div:nth-child(2) {
            background-color: green;
            transform: skew(0.45deg);
        }
        .container div:nth-child(3) {
            background-color: rgb(62.62.126);
            transform: skew(45deg.0);
        }
        .container div:nth-child(4) {
            background-color: lightcoral;
            transform: skew(30deg.45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</body>
</html>
Copy the code

2 d displacement

2 d scaling

2 d rotation

2 d tilt

Related Posts

Writing crawlers with NodeJS (part 1): Common modules and JS syntax

Vue – Interacts with the back end

LeetCode solution: 455. Distributing cookies, greedy for loops, JavaScript, detailed comments