CSS转换-元素比例不转换

时间:2018-11-02 14:35:16

标签: javascript css css3 translate

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

然后视频会按比例缩放。

为什么元素不能通过转换转换操作移动?

1 个答案:

答案 0 :(得分:2)

添加像素单位:

translateX(250px)