How to preserve top left position when resizing div after rotation transform?

Question

I have a div which is absolutely positioned and has a rotation transform of 45deg. It has a fixed height but width can be changed dynamically.

When I increase the width dynamically the whole element drifts right and up.

How do I prevent this movement so that the left edge stays in place?

let box = document.getElementById('box')
let range = document.getElementById('range')

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

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

#box {
  height: 100px;
  top: 100px;
  left: 100px;
  position: absolute;
  border: 1px solid black;
  transform: rotate(45deg)
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Resize box</title>
</head>
<body>
<div class="slidecontainer">
  <input type="range" min="50" max="300" value="50" class="slider" id="range">
</div>
  
<div id="box"></div>
</body>
</html>

Kosh · Accepted Answer · 2018-12-06 00:32:24Z

1

Set transform-origin:

let box = document.getElementById('box')
let range = document.getElementById('range')

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

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

#box {
  height: 100px;
  top: 100px;
  left: 100px;
  position: absolute;
  border: 1px solid black;
  transform-origin:0 0;
  transform: rotate(45deg)
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Resize box</title>
</head>
<body>
<div class="slidecontainer">
  <input type="range" min="50" max="300" value="50" class="slider" id="range">
</div>
  
<div id="box"></div>
</body>
</html>

answered Dec 6, 2018 at 0:32

Kosh

18.6k2 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

spinners Over a year ago

Well, that was easy!!

Kosh Over a year ago

@spinners, absolutely!

Collectives™ on Stack Overflow

How to preserve top left position when resizing div after rotation transform?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related