Как переключить источник преобразования в соответствии с требованием преобразования? - PullRequest
Новая
       10

Как переключить источник преобразования в соответствии с требованием преобразования?

0 голосов
/ 07 декабря 2018

У меня есть div, который позиционируется абсолютно.Я хочу динамически изменить его ширину и применить преобразование вращения.

При повороте я хотел бы, чтобы начало преобразования было 

transform-origin: center

. При изменении ширины я хотел бы, чтобы начало преобразованиябыть 

transform-origin: top left

Моя проблема заключается в том, что когда я динамически изменяю источник преобразования, положение прыжков в div.

Есть ли способ предотвратить прыжок элемента? 

let box = document.getElementById('box')
let width = document.getElementById('width')
let rotate = document.getElementById('rotate')

box.style.width = width.value + "px"; 

rotate.oninput = function() {
  box.style.transform = `rotate(${rotate.value}deg)`; 
}

width.oninput = function() {
    box.style.width = width.value + "px";  
}

width.addEventListener("mousedown", e => {
  box.style.transformOrigin = "top left"
})

rotate.addEventListener("mousedown", e => {
  box.style.transformOrigin = "center"
})
#box {
  top: 200px;
  left: 100px;
  position: absolute;
  height: 100px;
  border: 1px solid black;
  transform-origin: 0 0;
}
<div class="slidecontainer">
  width : <input type="range" min="10" max="300" value="50" class="slider" id="width">
</div>
  
<div class="slidecontainer">
  rotate: <input type="range" min="0" max="360" value="0" class="slider" id="rotate">
</div>
  
<div id="box"></div>
...