CSS 变换 - 元素缩放但不翻译答案

【问题标题】：CSS Transform - Element Scales BUT doesn't TranslateCSS 变换 - 元素缩放但不翻译
【发布时间】：2018-11-02 22:39:12
【问题描述】：

我的 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>

在我的 CSS 表中，我只是简单地定位视频：

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)";

然后视频确实被缩放了。

为什么元素没有被变换平移操作移动？

【问题讨论】：

组合它们不起作用吗？ document.getElementById("animation").style.transform = "translateX(250) scaleX(0.2)";
jsbin.com/jedacuyime/edit?html,css,js,console,output 你需要在 translateX 属性中添加一个单位“px”，比如 translateX(250px)

标签： javascript css translate

【解决方案1】：

添加像素单位：

translateX(250px)

【讨论】：

我对编程了解得越多，我就越意识到它总是像这样微不足道的事情！谢谢，我会尽快接受你的回答:)