从
Changing width/height to a CSS rotated div triggers top/left reposition开始,我需要一些帮助来解决CSS旋转和动态宽度/高度.
我明白transform-origin,并认为我需要动态更新它,同时更新元素的宽度或高度.我只对技术解决方案感兴趣,而不是任何跨浏览器的聪明才智,因此the demo只使用-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)'});
});
在second demo,添加CSS
#rotated {
-webkit-transform-origin: 100px 50px;
-webkit-transform: rotate(60deg);
}
并将角度滑块的值更新为60
Angle: <input id="angle" type="range" min="0" max="360" step="1" value="60">
在通过滑块修改宽度/高度时产生正确的结果,因为元件在x,y尺寸上增长和收缩而不移动位置.但是,现在旋转元素不再在所需(中心点)原点附近.
我已经尝试了一些这样的变体(mousedown,mousemove,change),我认为这将在宽度/高度修改之前设置原点,但是< div>还在换位
$('#width,#angle').change(function() {
$('#rotated').css({'-webkit-transform-origin': $('#width').val()/2 + 'px' + $('#height').val()/2 + 'px'});
});
我认为jQuery正在同时应用CSS更改,而我认为原点需要在宽度/高度变化之前进行更新.
基本上,我想要的形状总是围绕中心点旋转,并且在修改宽度/高度(如果形状已经旋转)时不移动.
解决方法
FIDDLE DEMO!!!
我首先要告诉你为什么会发生这种情况.正如你可以看到,当你的div没有旋转没有问题.那么为什么这个奇怪的行为呢？
答：因为你要求…当你改变高度或宽度时,div的50％或者中点正在改变.因此,浏览器将您的div放置在新的50％的未旋转DIV的方式,然后旋转它.
解决方案是将旋转的div包装在另一个div(让我们说“#wrapper”)具有固定的宽度和高度,并且overflow：visible.
然后,将#rotate放在#wrapper中,并在width或height上更改,计算更改并以#wrapper中心的方式翻译#rotated div(例如,对于width,翻译是 – (wrapWidth-newWidth)/ 2).
然后你旋转包装,瞧.
以下是基于您的设置的代码：
HTML：
<div id="wrap">
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="60">
</div>
<div id="rotateWrap">
<div id="rotated">Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
CSS：
#width,#angle {
position:relative;
display:block;
margin-bottom:10px;
width:200px;
}
#rotateWrap{
position:absolute;
overflow:visible;
height:100px;
width:200px;
top:200px;
left:100px;
outline:2px solid red;
-webkit-transform-origin: 50% 50%;
}
#rotated {
background:lightblue;
position:relative;
overflow:hidden;
height:100px;
}
#wrap{
position:absolute;
}
JAVASCRIPT
wPrev=$("#rotateWrap").width();
hPrev=$("#rotateWrap").height();
$('#width').mousedown(function(){
}).change(function() {
$("#rotated").width(newW=$(this).val())
.css({left: -(newW-wPrev)/2 + "px"});
});
$('#height').mousedown(function(){
}).change(function() {
$("#rotated").height(newH=$(this).val())
.css({top: -(newH-hPrev)/2 + "px"});
});
$('#angle').change(function() {
$("#rotateWrap").css({"-webkit-transform":"rotate("+$(this).val()+"deg)"});
});
