Transformer Faire pivoter les problèmes de positionnement de l'image

Question

Je rencontre des problèmes pour déplacer une image que j'ai précédemment tournée avec transformer la rotation. Plus spécifiquement, lorsque l'image est pivotée, les attributs supérieur et gauche ne sont pas mis à jour, il semble donc que l'image est uniquement pivotée graphiquement.

Ce que j'aimerais faire, c'est pouvoir déplacer l'image librement après l'avoir fait pivoter, mais c'est vraiment imprécis.

C'est la classe d'image

.element { 
    position: absolute; 
    transform-origin: 50% 50%; 
    width:20%; 
} 

Et ceci est le code de rotation

degree = $("#angleSlider").val(); 
$(ele).css('-moz-transform', 'rotate(' + degree + 'deg)'); 

Voici le code html

<div class="container"> 
    <img class="element" src="img.png"> 
    <img class="element" src="img1.png"> 
    <img class="element" src="img2.png"> 
</div> 

Answer 1

Utilisez ce que cela dépend aussi de ce que le navigateur que vous êtes en utilisant.

$(ele).css({"-moz-transform":"rotate(" + degree + "deg)"}); 
$(ele).css({"-ms-transform":"rotate(" + degree + "deg)"}); 
$(ele).css({"-webkit-transform":"rotate(" + degree + "deg)"}); 
$(ele).css({"transform":"rotate(" + degree + "deg)"}); 

Answer 2

J'ai créé un exemple en utilisant le curseur, bien que transform tournera l'élément graphique qui est vrai.

$(document).ready(function() { 
 
    var degree; 
 
    $(document).on("input", "#myRange", function(){ 
 
    degree = $(this).val(); 
 
    $(".element").css('transform', 'rotate(' + degree + 'deg)'); 
 
}); 
 
});

.element { 
 
    position: absolute; 
 
    top:30%; 
 
    transform-origin: 50% 50%; 
 
    width:20%; 
 
} 
 

 
#angleslider{ 
 
width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="angleslider"> 
 
<span>0 deg</span> <input type="range" min="1" max="350" value="50" class="slider" id="myRange"><span> 360 deg </span> 
 
</div> 
 

 
<div class="container"> 
 
    <img class="element" src="http://img.freepik.com/free-icon/move-to-next_318-80203.jpg?size=338c&ext=jpg"> 
 
</div>

Answer 3

CSS Transformer ne change pas la valeur de la propriété en haut à gauche.

var img = document.getElementById('img'); 
 

 
document.getElementById('degree').addEventListener('input', function() { 
 
    img.style.transform = "rotate(" + this.value + "deg)"; 
 
}); 
 

 
document.getElementById('top').addEventListener('input', function() { 
 
    img.style.top = this.value + "px"; 
 
}); 
 

 
document.getElementById('left').addEventListener('input', function() { 
 
    img.style.left = this.value + "%"; 
 
});

.img-container { 
 
    position: relative; 
 
    border: 2px solid red; 
 
    margin: 0 0 20px; 
 
    height: 200px; 
 
    
 
} 
 

 
.img-container img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    outline: 2px solid blue; 
 
    border: 1px solid white; 
 
}

<div class="img-container"> 
 
    <img src="https://dummyimage.com/150x4:3/" id="img" /> 
 
</div> 
 
<div> 
 
    Rotate: 
 
    <input type="range" id="degree" min="0" max="360" step="any" value="0" /> 
 
</div> 
 
<div> 
 
    Top: 
 
    <input type="range" id="top" min="0" max="88" step="any" value="0" /> 
 
</div> 
 
<div> 
 
    Left: 
 
    <input type="range" id="left" min="0" max="100" step="any" value="0" /> 
 
</div>

Answer 4

Je résolu mon problème en ajoutant un récipient à chaque image que j'avais, déplacer toutes les propriétés à la div et faire le transform-rotate que sur l'image