console 命令行工具 X clear

console

var box = document.querySelector(".box");
function selectChange(event) {
    box.style["animation-name"] = event.currentTarget.value;
}

<!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>
    </head>
    <body>
        <div class="example">
            <select class="select" onchange="selectChange(event)">
                <option value="rotate_translate">1.旋转 + 平移：rotate(90deg) translateX(100px)</option>
                <option value="translate_rotate">2.平移 + 旋转：translateX(100px) rotate(90deg)</option>
                <option value="scale_translate">3.缩放 + 平移：scaleX(2) translateX(100px)</option>
                <option value="translate_scale">4.平移 + 缩放：translateX(100px) scaleX(2)</option>
                <option value="rotate_scale">5.旋转 + 缩放：rotate(90deg) scaleX(2)</option>
                <option value="scale_rotate">6.缩放 + 旋转：scaleX(2) rotate(90deg)</option>
            </select>
            <div class="wrap">
                <div class="box">
                    <div class="axis_x" title="x轴"></div>
                    <div class="axis_y" title="y轴"></div>
                    <div class="text_x">x</div>
                    <div class="text_y">y</div>
                </div>
            </div>
        </div>
    </body>
</html>

* {
    box-sizing: border-box;
}

.example {
    margin: 20px auto 0;
    width: 400px;
    text-align: center;
}

.select {
    margin-bottom: 10px;
    height: 28px;
}

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    outline: 1px solid blue;
}

.box {
    position: relative;
    width: 200px;
    height: 200px;
    outline: 1px dashed black;
    animation: 3s forwards;
    /* transform: rotate(90deg) translateX(100px); */
}

.axis_x {
    position: absolute;
    top: 99px;
    left: 0;
    width: calc(100% - 10px);
    height: 2px;
    background: #333333;
}

.axis_x::after {
    position: absolute;
    top: -4px;
    right: -10px;
    width: 10px;
    height: 10px;
    background: #333333;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    content: "";
}

.axis_y {
    position: absolute;
    left: 99px;
    top: 0;
    width: 2px;
    height: calc(100% - 10px);
    background-color: #333333;
}

.axis_y::after {
    position: absolute;
    right: -4px;
    bottom: -10px;
    width: 10px;
    height: 10px;
    background: #333333;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    content: "";
}

.text_x {
    position: absolute;
    right: 20px;
    top: 100px;
    transform: rotate(-90deg);
}

.text_y {
    position: absolute;
    bottom: 15px;
    left: 105px;
}


/* 1.旋转 + 平移 */

@keyframes rotate_translate {
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(90deg) translateX(100px);
    }
}


/* 2.平移 + 旋转 */

@keyframes translate_rotate {
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(100px) rotate(90deg);
    }
}


/* 3.缩放 + 平移 */

@keyframes scale_translate {
    50% {
        transform: scaleX(2);
    }
    100% {
        transform: scaleX(2) translateX(100px);
    }
}


/* 4.平移 + 缩放 */

@keyframes translate_scale {
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(100px) scaleX(2);
    }
}


/* 5.旋转 + 缩放 */

@keyframes rotate_scale {
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(90deg) scaleX(2);
    }
}


/* 6.缩放 + 旋转 */

@keyframes scale_rotate {
    50% {
        transform: scaleX(2);
    }
    100% {
        transform: scaleX(2) rotate(90deg);
    }
}