I am currently working on transforming an image both vertically and horizontally, as well as scaling it using JavaScript. While I have managed to resize the image successfully, it doesn't quite look how I want it to. I am aiming for a similar effect as shown in this example. When adjusting the vertical bar, the image should move up and down, and when adjusting the horizontal bar, the image should move left or right. The current "testresize()" function does resize the image, but it's not achieving the desired outcome. I would like to apply CSS transform properties such as translateX(), translateY(), and scale() transforms to each image individually. You can find a demo of what I'm describing here: Range Slider Demo.
<div id="toggle-components">
<fieldset>
<legend>Choose image to display</legend>
<input type="checkbox" id="mage1" onclick="if(this.checked){displayimg()}")><label for="image1">diving</label>
<input type="checkbox" id="mage2" onclick="if(this.checked){displaybgimage()}")><label for="image2">jumping</label>
</div>
<div id="container">
<img id="dolphin1" class="image" src="../images/img/image1.png" >
<img id="dolphin2" class="image" src="../images/img/image2.png" >
</div>
<div id="adjust-components">
<fieldset>
<legend>Adjust image</legend>
<label for="vertical-control">move vertical:</label>
<input id="vertical-control" type="range" min="-100" max="100" value="0" ><br>
<label for="size-control">resizesize:</label>
<input id="size-control" type="range" min="-100" max="100" value="0" onChange="testresize(this.value)"><br>
<label for="horizontal-control">move horizontal:</label>
<input id="horizontal-control" type="range" min="-100" max="100" value="0" ><br>
</fieldset>
</div>
var gettestimage=document.getElementsByClassName("image");
//resize image
function testresize(val){
for(var i=0;i<gettestimage.length;i++){
var chek1 = document.getElementById("image1");
var chek2 = document.getElementById("image2");
if(chek1.checked){
gettestimage[0].style.width=5*(val / 1)+'px';
console.log(val)
}else if(chek2.checked){
gettestimage[1].style.width=5*(val / 1)+'px';
}