CSS 变换 - 元素缩放但不平移

Question

我的 index.html 页面上插入了一个视频元素：

<body>
    <video id="animation" autoplay loop>
        <source src="animation.mp4" type="video/mp4">
        <source src="animation.webm" type="video/webm">
    </video>
    <script>
        scaletranslate();
    </script>
</body>

在我的CSSsheet中我简单定位视频：

body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
video {
    position: absolute;
    top: 0px;
    left: 0px;
}

而 Javascript 的 scaletranslate() 函数是：

document.getElementById("animation").style.transform = "translateX(250)";

视频没有正常移动，但是，如果我使用此代码：

document.getElementById("animation").style.transform = "scaleX(0.2)";

然后视频会缩放。

为什么元素没有随着变换转换操作移动？

Answer 1

添加像素单位：

translateX(250px)

CSS 变换 - 元素缩放但不平移

CSS Transform - Element Scales BUT doesn't Translate

javascript

css

translate