Javascript Scale image и Transfom image располагаются вертикально, горизонтально

Question

Я хочу трансформировать изображение по вертикали, горизонтали, а также масштабировать изображение с помощью JavaScript.На данный момент мне удается заставить работать изображение с измененным размером, но оно выглядит неправильно.Я пытаюсь создать что-то похожее на Transform image .когда отрегулирована вертикальная полоса перемещения, изображение должно двигаться вверх и вниз, а когда отрегулировано горизонтальное перемещение, изображение должно двигаться горизонтально.На данный момент функция testresize () работает с изменением размера изображения, но это не похоже на то, что я хочу.Я хочу применить свойство CSS transform, содержащее translateX (), translateY () и scale () для каждого изображения. Ползунок диапазона

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

        }

Answer 1

Если вы хотите установить свойство transform css, тогда почему вы устанавливаете width и height для масштабирования изображения? Решение на самом деле довольно простое, мне просто нужно было использовать свойство tansform. Это решение работает только с одним изображением, но я уверен, что вам удастся заставить его работать с несколькими.

var image = document.getElementById("image1")

//The transformation (scale, translation, rotation) of the image
var transform = {
  translation: {
    x: 0,
    y: 0
  },
  scale: 1
};

function scaleImage(val){
  transform.scale = val;
  applyStyle()
}

function translateImage(axis, val){
  transform.translation[axis] = val;
  applyStyle()
}

function applyStyle() {
  image.style.transform = `scale(${transform.scale}) translate(${transform.translation.x}px, ${transform.translation.y}px)`
}

<div id="container">
  <img id="image1" class="image" src="https://www.w3schools.com/w3css/img_lights.jpg" width="500">
</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" onchange="translateImage('y', this.value)"><br>
    <label for="size-control">scale:</label>
    <input id="size-control" type="range" min="0" max="2" value="1" step="0.1" onchange="scaleImage(this.value)"><br>
    <label for="horizontal-control">move horizontal:</label>
    <input id="horizontal-control" type="range" min="-100" max="100" value="0" onchange="translateImage('x', this.value)"><br>
  </fieldset>
</div>