css transform translate 不工作，它是否已被删除或者这只是一个错误答案

【问题标题】：css transform translate not working, has it been deleted or is this just a bugcss transform translate 不工作，它是否已被删除或者这只是一个错误
【发布时间】：2023-02-22 11:54:28
【问题描述】：

我正在观看一个关于 css 加载器的教程视频，并在下面的代码中完全复制，在视频的这一点上，css 转换，translate3d 工作，但在下面的复制代码中，我没有检查可能的内容是问题所在，分别将我的代码与视频中的代码进行比较，但没有问题，那么 css transform: translate3d 为何不起作用，为什么我的球不弹跳？

/*index.html*/
<!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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/loader3.css">
    <title>CSS Loaders</title>
</head>
<body>
    
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

/* loader3.css*/
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader > span {
    display: inline-block;
    background-color: purple;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 0 8px;
    transform: translate3d(0);
    animation: bounce 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
    background-color: palevioletred;
}

.loader > span:nth-child(3) {
    
}

@keyframes bounce {
   to {
        width: 16px;
        height: 16px;
        transform: translate3d(0 -16px, 0)
    }
}

【问题讨论】：

标签： html css transform translate3d

【解决方案1】：

注意细节
transform: translate3d(0 -16px, 0)
缺少，

transform: translate3d(0, -16px, 0)

【讨论】：