Динамически обновлять transform-origin для повернутого элемента CSS3 при изменении ширины или высоты

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

Я понимаю transform-origin и думаю, что мне нужно динамически обновлять его одновременно с изменением ширины или высоты элемента. Меня интересует только техническое решение, а не какой-либо кроссбраузерный ум, и поэтому демо использует только префикс -webkit .

HTML

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Width: 
    Height: 
    Angle: 

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);
}

и обновлено значение ползунка angle до 60

Angle: 

дает правильный результат при изменении ширины / высоты с помощью ползунков, поскольку элемент увеличивается и уменьшается в размерах x, y без перемещения положения. Однако поворот элемента теперь больше не вокруг желаемого (центральной точки) начала координат.

Я пробовал некоторые варианты (mousedown, mousemove, change), которые, как я думал, установят начало координат до изменения ширины / высоты, но

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