变换旋转图像定位问题

我在移动图像时遇到问题，我之前用变换旋转。变换旋转图像定位问题

更具体地说，当图像旋转时，顶部和左侧的属性没有更新，所以看起来像图像只是以图形方式旋转。

我想要做的是能够在旋转后自由移动图像，但它确实不准确。

这是图片类

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

这是轮换代码

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

下面是HTML

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

来源

2017-09-26 Densi Ramja

将容器每个图像我有，移动所有属性到div，使transform-rotate里面放一个图片容器，而不是移动容器。 – AVAVT

你可以发布一些HTML阿尔斯托更好地了解你的问题？ – sissy

*“所以看起来图像只是以图形方式旋转。”* - 是的，这正是**变换'做的。 –

使用这个也要看你是什么浏览器使用。

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

来源

2017-09-26 13:26:44

我已经实现了跨浏览器兼容性，这不是问题 –

我已经使用滑块创建了一个例子，虽然transform将图形旋转元素这是真的。

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

来源

2017-09-26 13:42:34 bhansa

CSS变换不会改变左上方的属性值。

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>

来源

2017-09-26 13:52:08

这是一个很好的演示@Miraz – bhansa

谢谢你的赞赏@bhansa。 –

我解决我的问题只在图像

来源

2017-09-26 14:32:16

检查我的下面的答案，我没有使用每个图像的容器，但你可以使用id的具体目标。 – bhansa

变换旋转图像定位问题

回答

相关问题