变换旋转图像定位问题
我在移动图像时遇到问题,我之前用变换旋转。变换旋转图像定位问题
更具体地说,当图像旋转时,顶部和左侧的属性没有更新,所以看起来像图像只是以图形方式旋转。
我想要做的是能够在旋转后*移动图像,但它确实不准确。
这是图片类
.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>
使用这个也要看你是什么浏览器使用。
$(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)"});
我已经实现了跨浏览器兼容性,这不是问题 –
我已经使用滑块创建了一个例子,虽然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>
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>
这是一个很好的演示@Miraz – bhansa
谢谢你的赞赏@bhansa。 –
将容器每个图像我有,移动所有属性到div,使
transform-rotate
里面放一个图片容器,而不是移动容器。 – AVAVT你可以发布一些HTML阿尔斯托更好地了解你的问题? – sissy
*“所以看起来图像只是以图形方式旋转。”* - 是的,这正是**变换'做的。 –