I have a video element inserted on my index.html page:
<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:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
video {
position: absolute;
top: 0px;
left: 0px;
}
And the Javascript's scaletranslate()
function is:
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?
Add the pixel unit:
translateX(250px)