Блог

Главная - Вопросы по программированию - Поворот изображения по горизонтали, как флип

Поворот изображения по горизонтали, как флип

#javascript #html #css

#javascript #HTML #css

Вопрос:

Поворачивайте изображение по горизонтали, как при переворачивании справа налево в функции нажатия кнопки onclick. я пытаюсь перевернуть изображение с помощью простых функций.

     var looper;
        var degrees = 0;
        function SetTransform(el,speed)
        {
            degrees = 0;
            Transform(el,speed);
        }       

        function Transform(el,speed){ 
            var cog1 = document.getElementById(el);
            cog1.style.WebkitTransform = "rotate(" degrees "deg)";
            if(degrees <=359)
            {
            looper = setTimeout('Transform('' el '',' speed ')',speed);
            }
             degrees  ;
            
            document.getElementById("status").innerHTML = "rotate(" degrees "deg)";
        }

Комментарии:

1. почему вы пишете эту сложную функцию для этой простой вещи, просто используйте transform: scale(-1) по щелчку

Ответ №1:

Вы можете добиться того же с помощью простого обработчика событий и однострочного стиля, используя tranform свойство

Пример здесь

 const myFunction=()=>{
    document.getElementById('target').style.transform='scaleX(-1)';
}  
 <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Flip an Image</h2>
<button onclick="myFunction()">Click to Flip the Image</button>
<div>
<img src="https://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-1.jpg" alt="Paris" width="400" height="300" id="target">
</div>
</body>
</html>

Также, если вы хотите, чтобы изображение переворачивалось справа налево и наоборот, каждый раз, когда вы нажимаете кнопку, вы можете добавить
простое условие в свой Js, как показано ниже.

 const myFunction=()=>{
    var styles=document.getElementById('target').style;
    if(styles.transform==='scaleX(-1)')
        styles.transform='scaleX(1)';
    else
        styles.transform='scaleX(-1)';
}  
 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Flip an Image</h2>
<button onclick="myFunction()">Click to Flip the Image</button>
<div>
<img src="https://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-1.jpg" alt="Paris" width="400" height="300" id="target">
</div>
</body>
</html>

Скажите, был ли я чем-нибудь полезен 🙂

Ответ №2:

Как я комментировал выше, просто используйте transfrom: scaleX(-1); on click

Примечание: если вы не хотите переход, удалите его из изображения.

 document.getElementById('flip').onclick  = function(){
  document.getElementById('img').classList.toggle("flipped");
}  
 img.flipped {transform: scaleX(-1)}


/*just for demo purpose*/
button {margin-left: 30px;}
body {display: flex; align-items: center;}
img {height: 180px; width: 270px; transition: transform 1s;}  
 <img id="img" src="https://images.freeimages.com/images/large-previews/7bc/bald-eagle-1-1400106.jpg">

<button id="flip">Flip Image</button>

Ответ №3:

Быстро и просто:

 function flip(el) {
  el.classList.toggle('flipped');
}  
 .flipped {
  transform: scaleX(-1);
}  
 <img src="https://source.unsplash.com/random/500x500" onclick="flip(this)">

Ответ №4:

 var rotate_interval;
document.addEventListener("DOMContentLoaded", function() {
  var button = document.getElementById("rotate_button");
  button.addEventListener("click", function() {
    var rotate = parseInt(this.dataset.rotate, 10);
    if (rotate == 0) {
      this.dataset.rotate = 1;
      this.innerText = "Stop rotate";
      rotate_interval = setInterval(rotateElement, 10);
    } else {
      this.dataset.rotate = 0;
      this.innerText = "Start rotate";
      clearInterval(rotate_interval);
    }
  });
});

function rotateElement() {
  var img = document.getElementById("rotate_img");
  var angle = parseFloat(img.dataset.angle, 10);
  var speed = parseFloat(img.dataset.speed);
  var new_angle = angle   speed;
  if (new_angle < -1 || new_angle > 1){
    speed = -speed;
    new_angle = angle   speed;
  }
  img.dataset.angle = new_angle;
  img.dataset.speed = speed;
  img.style.transform = 'scaleX('   new_angle   ')';
}  
 img#rotate_img {
  width: 100px;
  height: 100px;
}  
 <img src="https://lh3.googleusercontent.com/-_Zp3yhfoB3w/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rftojcGs3QomG3vHceiX8VtM98v6g/photo.jpg" id="rotate_img" data-angle="1.0" data-speed="-0.01" />
<button type="button" id="rotate_button" data-rotate="0">Start rotate</button>

Вы можете сохранить текущий угол в data- атрибутах и получить к нему доступ через element.dataset.ATTRIBUTE_NAME