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