Вращение div/img с проблемой кнопки

Я пытаюсь повернуть div с помощью html и javascript, но я не могу заставить его вращаться на месте. На данный момент он крутит изображение вокруг в широком круге по всей странице, а не в оригинальном месте. Я думаю, что это имеет какое-то отношение ко мне, используя div для хранения изображения. Это похоже на то, что ось 0 находится в центре страницы, но я не знаю, как это исправить.Вращение div/img с проблемой кнопки

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

источник

2015-04-08 Stevo

попытаться повернуть только IMG в родителе «фото» Див как этот 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>

источник

2015-04-08 08:06:49 Asgu

Bingo. Спасибо, сэр! – Stevo

Использование CSS3 вы могли бы попробовать это:

transform-origin:center center;

Это должно установить центр для преобразования к элементам собственного центра. Я нашел это here.

источник

2015-04-08 08:01:33

где бы у места, что в коде точно? – Stevo

Ну, если у вас есть файл css, я бы создал там правило, например '#photoimg {transform-origin: center center; } ' В противном случае вы можете использовать inline css' ' Третий способ - установить атрибут через javascript. –

Как бы вы установили атрибут через javascript? – Stevo

Вращение div/img с проблемой кнопки

ответ

Смежные вопросы