从将宽度/高度更改为 CSS 旋转的 div 触发顶部/左侧重新定位之后,我需要一些帮助来解决 CSS 旋转和动态宽度/高度。
我理解transform-origin
并认为我需要在更新元素的宽度或高度的同时动态更新它。我只对技术解决方案感兴趣,而不是任何跨浏览器的聪明才智,因此演示只使用-webkit
前缀。
HTML
<div id="wrap">
<div id="rotated">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
Width: <input id="width" type="range" min="20" max="400" step="1" value="200">
Height: <input id="height" type="range" min="20" max="400" step="1" value="100">
Angle: <input id="angle" type="range" min="0" max="360" step="1" value="0">
</div>
CSS
#rotated {
background:lightblue;
border:1px dotted #000;
height:100px;
width:200px;
position:absolute;
top:300px;
left:100px;
overflow:hidden;
}
#width, #height, #angle {
display:block;
margin-bottom:10px;
width:200px;
}
JavaScript
$('#width').change(function() {
$('#rotated').css({width:this.value + 'px'});
});
$('#height').change(function() {
$('#rotated').css({height:this.value + 'px'});
});
$('#angle').change(function() {
$('#rotated').css({'-webkit-transform': 'rotate(' + this.value + 'deg)'});
});
在第二个演示中,添加 CSS
#rotated {
-webkit-transform-origin: 100px 50px;
-webkit-transform: rotate(60deg);
}
并将角度滑块更新value
为60
Angle: <input id="angle" type="range" min="0" max="360" step="1" value="60">
通过滑块修改宽度/高度时会产生正确的结果,因为元素在x, y
尺寸上增长和缩小而不移动位置。但是,现在不再围绕所需的(中心点)原点旋转元素。
我已经尝试了一些变体(mousedown、mousemove、change),我认为会在修改宽度/高度之前设置原点,但<div>
仍在移动位置。
$('#width, #height, #angle').change(function() {
$('#rotated').css({'-webkit-transform-origin': $('#width').val()/2 + 'px' + $('#height').val()/2 + 'px'});
});
我假设 jQuery 正在同时应用 CSS 更改,而我认为原点需要在宽度/高度更改之前更新。
基本上,如果形状已经旋转,我希望形状始终围绕中心点旋转,并且在修改宽度/高度时不移动。