Rotate a div with a button using javascript

Question

I am trying to rotate a div using an onclick function with js but when I click my button nothing happens. Any suggestions? I want to be able to keep clicking the button for a 90 degree rotation, not just once.

<html>
    <form action="#" method="post">
        <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
        <input type="button" value="Show Image" id="btn1" />
    </form>
    <div id="photo"></div>
    <script>
        document.getElementById('btn1').addEventListener('click', function(){
        document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'" alt="Image" />';
        });
    </script>
    <input type="button" value="Rotate" onclick="rotatePhoto()">
    <script>function rotatePhoto(){
        var img = document.getElementById("photo");
        img.rotate(20*Math.PI/90);
        }
    </script>
</html>

Stevo · Accepted Answer · 2015-04-08 11:04:39Z

I was able to do achieve my goal using the following code below. It's not perfect since I have yet to deal with the overlapping issue, but it does rotate the picture (within the div) which is really all I wanted. Special thanks to user Asgu for helping me solve this issue here http://tinyurl.com/qezs3yk. You CAN rotate a picture using a button with only html and javascript!

<html>
    <form action="#" method="post">
                <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
                <input type="button" value="Show Image" id="btn1" />
            </form>
        <div id="photo"></div>
        <script>
                document.getElementById('btn1').addEventListener('click', function(){
                document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image" />';
                });
            </script>
            <button id="button">rotate</button>>
            <script>
                document.getElementById("button").onclick = function(){
                    var curr_value = document.getElementById('photoimg').style.transform;
                    var new_value = "rotate(90deg)";
                    if(curr_value !== ""){
                    var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 90;
                    new_value = "rotate(" + new_rotate + "deg)";
                    }
                    document.getElementById('photoimg').style.transform = new_value;
                };
            </script>
    </html>

Zivko · Accepted Answer · 2015-04-07 11:47:12Z

0

You must have canvs with img inside and then apply rotation to canvas or you can do it with CSS transform: rotate(?deg)

answered Apr 7, 2015 at 11:47

Zivko

3675 silver badges16 bronze badges

2 Comments

Stevo Over a year ago

I like canvas but it won't work for anything under IE 9. I'd like to go down to at least IE 8, but being able to handle 6-7 would be nice if not too difficult.

Zivko Over a year ago

then css3 isnt option for you (browser compatibility: caniuse.com/#feat=transforms2d). Maybe svg but that will complicate it more and more

mkaminsky · Accepted Answer · 2015-04-07 17:51:13Z

0

You can't do this with just javascript, unless you're using a <canvas>. You have to set the CSS properties like this:

-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);

So maybe something like this:

document.getElementById('photo').style.transform = "rotate(30deg)";

Edit

HTML

<img id="photo" src="img.png">
<button id="button">rotate</button>

JS

document.getElementById("button").onclick = function(){
    var curr_value = document.getElementById('photo').style.transform;
    var new_value = "rotate(30deg)";
    if(curr_value !== ""){
        var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 30;
        new_value = "rotate(" + new_rotate + "deg)";

    }
    document.getElementById('photo').style.transform = new_value;
};

edited Apr 7, 2015 at 17:51

answered Apr 7, 2015 at 11:45

mkaminsky

3532 silver badges10 bronze badges

3 Comments

Stevo Over a year ago

transform seems to only rotate the image once when clicking the button. How do i make it so it rotates again for each additional click?

Stevo Over a year ago

Thanks for your help. How do I get it to only spin on it's center and stay in it's original area? As of now it spins around the whole page.

mkaminsky Over a year ago

try applying the css property transform-origin: center to the image you are trying to rotate.

Collectives™ on Stack Overflow

Rotate a div with a button using javascript

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related