Динамически обновлять трансформирование-происхождение вращающегося элемента CSS3 при изменении ширины или высоты

Следуя за Изменение ширины/высоты для поворота div с помощью CSS с верхушкой вверх/слева Мне нужна помощь в разрешении вращения 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 в одно и то же время, тогда как я думаю, что происхождение нуждается в обновлении до изменения ширины/высоты.

В принципе, я хочу, чтобы фигура всегда вращалась вокруг центральной точки и не двигалась при изменении ширины/высоты, если форма уже повернута.

Ответы

Ответ 1

FIDDLE DEMO!!!

Я первый ganna скажу вам, ПОЧЕМУ это происходит. Как вы можете видеть, когда ваш div не вращается, проблем нет. Итак, почему это странное поведение происходит, когда оно есть?

Ответ: Потому что вы просите об этом... Когда вы меняете высоту или ширину, изменяется значение 50% или средняя точка. и, таким образом, браузер помещает ваш div таким образом, чтобы новые 50% невращаемого DIV были, а затем поворачивали его.

Решение состоит в том, чтобы обернуть повернутый div в другой div (скажем, "#wrapper" ) с фиксированной шириной и высотой и overflow:visible.

Затем вы помещаете #rotated внутри #wrapper и по ширине или высоте, вычисляете изменение и переводите #rotated div таким образом, чтобы он всегда находился в центре #wrapper (например, для ширины, перевод - (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)"});
});