像翻转一样水平旋转图像

Question

像按钮 onclick function 中的从右向左翻转一样水平旋转图像。我尝试用简单的功能翻转图像。

    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)";
        }

Answer 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>

请告诉我是否有任何帮助:)

Answer 2

正如我上面的 comm.neted 只是使用 transfrom transfrom: scaleX(-1); 点击

注意：如果您不想要过渡，请将其从图像中删除。

 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>

Answer 3

快速简单：

 function flip(el) { el.classList.toggle('flipped'); }

 .flipped { transform: scaleX(-1); }

 <img src="https://source.unsplash.com/random/500x500" onclick="flip(this)">

Answer 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访问它

像翻转一样水平旋转图像

问题描述

4 个解决方案

解决方案1
2 2020-10-26 10:18:44

解决方案2
1 已采纳 2020-10-26 10:29:34

解决方案3
0 2020-10-26 10:38:14

解决方案4
0 2020-10-26 10:41:10

像翻转一样水平旋转图像

问题描述

4 个解决方案

解决方案1 2 2020-10-26 10:18:44

解决方案2 1 已采纳 2020-10-26 10:29:34

解决方案3 0 2020-10-26 10:38:14

解决方案4 0 2020-10-26 10:41:10

解决方案1
2 2020-10-26 10:18:44

解决方案2
1 已采纳 2020-10-26 10:29:34

解决方案3
0 2020-10-26 10:38:14

解决方案4
0 2020-10-26 10:41:10