修改宽度或高度时动态更新 CSS3 旋转元素的变换原点

Question

继 更改宽度/高度CSS 旋转 div 触发顶部/左侧重新定位 我需要一些帮助来解决 CSS 旋转和动态宽度/高度。

我理解 transform-origin 和我认为我需要在更新元素的宽度或高度的同时动态更新它。我只对技术解决方案感兴趣，而不是任何跨浏览器的聪明才智，因此 演示< /strong> 仅使用 -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);
}

并更新 通过滑块修改宽度/高度时，将角度滑块的值设置为60

Angle: <input id="angle" type="range" min="0" max="360" step="1" value="60">

会产生正确的结果，因为元素会在<代码>x， y 尺寸，无需移动位置。但是，现在不再围绕所需的（中心点）原点旋转元素。

我尝试了一些变体（mousedown、mousemove、change），我认为会在修改宽度/高度之前设置原点，但

仍在移动位置。

$('#width, #height, #angle').change(function() {
    $('#rotated').css({'-webkit-transform-origin': $('#width').val()/2 + 'px' + $('#height').val()/2 + 'px'});
});

我假设 jQuery 同时应用 CSS 更改，而我认为源需要在宽度/高度更改之前更新。

基本上，我希望形状始终围绕中心点旋转，并且如果形状已经旋转，则在修改宽度/高度时不要移动。

Answer 1

FIDDLE 演示！！！

我首先要告诉你为什么会发生这种情况。正如您所看到的，当您的 div 不旋转时没有问题。那么为什么会出现这种奇怪的行为呢？

答案：因为你要求它...当你改变高度或宽度时，div 的 50% 或中点正在改变。因此，浏览器将您的 div 以未旋转 DIV 的新 50% 的方式放置，然后旋转它。

解决方案是将旋转的 div 包装在另一个具有固定宽度和高度以及 overflow:visible 的 div 中（假设为“#wrapper”）。

然后将 #rotated 放置在 #wrapper 内部，并在宽度或高度发生变化时，计算变化并以始终位于 #wrapper 中心的方式平移 #rotated div（例如，对于宽度，平移为 - (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, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

CSS:

#width, #height, #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)"});
});