javascript - Rotating a div/img with a button issue -
javascript - Rotating a div/img with a button issue -
i trying rotate div using html , javascript can't rotate in place. of circles image around in wide circle on page , not in it's original spot. think has me using div hold image. it's making 0 axis center of page i'm not sure how prepare that.
<html> <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> <button id="button">rotate</button>> <script> 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; }; </script> </html>
try rotate img in parent 'photo' div https://jsfiddle.net/ab5jkybl/
<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(30deg)"; if(curr_value !== ""){ var new_rotate = parseint(curr_value.replace("rotate(","").replace(")","")) + 30; new_value = "rotate(" + new_rotate + "deg)"; } document.getelementbyid('photoimg').style.transform = new_value; }; </script> javascript html
Comments
Post a Comment