2

Rotate image horizontally like Flipping Right to Left in button onclick function. i am try to flip the image in simple functions.

    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
  • why are you writing this complex function for this simple thing, just use transform: scale(-1) on click Oct 26, 2020 at 10:07

4 Answers 4

2

You can achieve the same by just a simple event handler and a one line style using tranform property

Example here

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> 

Also If you want the Image to Flip from right to left and vice-versa , every time you click the button than you can add a simple condition in your Js like shown below.

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> 

Do tell me whether I was of any help :)

1

As I commeneted above just use transfrom: scaleX(-1); on click

Note: if you do not want the transition then remove it from image.

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>

0

Quick and simple:

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

0

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>

You can store current angle in data- attributes and access to it via element.dataset.ATTRIBUTE_NAME

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.