CSS转换-元素比例不转换

Question

I have a video element inserted on my index.html page: 我在index.html页面上插入了一个video元素：

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

In my CSS sheet I am positioning the video simply: 在我的CSS工作表中，我只是将视频定位：

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

And the Javascript's scaletranslate() function is: Javascript的scaletranslate()函数为：

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

The video does not move as it should, however, if I use this code: 但是，如果我使用以下代码，则视频不会按原样移动：

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

Then the video does get scaled. 然后视频确实会缩放。

Why is the element not being moved with the transform translate operation? 为什么元素没有通过转换转换操作移动？

Answer 1

添加像素单位：

translateX(250px)

CSS转换-元素比例不转换

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-11-02 14:38:25

CSS转换-元素比例不转换

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-11-02 14:38:25

解决方案1
2 已采纳 2018-11-02 14:38:25