How to move a div relative to its center(like an anchor point)?

Question

When i drag a mouse over a div i want that div to resize after it's center like an anchor point but i don't know how.By default the "anchor point" it's set left-top

Here is an example :

 var x = document.getElementById('mydiv'); x.onmouseover = function() { res_in(this.id); }; x.onmouseout = function() { res_out(this.id); }; function res_in(id) { document.getElementById(id).style.width = '70px'; document.getElementById(id).style.height = '70px'; } function res_out(id) { document.getElementById(id).style.width = '100px'; document.getElementById(id).style.height = '100px'; } 

 .mydiv { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: aqua; border-radius: 100px; transition: all 0.3s ease; } 

 <div class="mydiv" id="mydiv"> </div> 

Answer 1

The cleanest way to do this is using transform . You can use the scale function to resize. The default transform origin is in the middle, but you can change that if you want using css's transform-origin property, which works exactly like you describe it - it's an anchor point for the transform.

Also, you don't need the JS that's in your example. Here's a working clean example:

 #mydiv { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: aqua; border-radius: 50%; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; } #mydiv:hover { background-color: red; transform: scale(0.7); -webkit-transform: scale(0.7); -ms-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); } 

 <div id="mydiv"></div> 

Read more:

• MDN transform-origin property

Answer 2

you can increase margin when size decrease. https://jsfiddle.net/sfxLb7en/52/

var x = document.getElementById('mydiv');
x.onmouseover = function(){res_in(this.id);};
x.onmouseout = function(){res_out(this.id);};
function res_in(id)
{
document.getElementById(id).style.width = '70px';
document.getElementById(id).style.height = '70px';
document.getElementById(id).style.margin = '15px';
}
function res_out(id)
{
document.getElementById(id).style.width = '100px';
document.getElementById(id).style.height = '100px';
document.getElementById(id).style.margin = '0px';
}

or just use transform:scale() https://jsfiddle.net/sfxLb7en/53/

var x = document.getElementById('mydiv');
x.onmouseover = function(){res_in(this.id);};
x.onmouseout = function(){res_out(this.id);};
function res_in(id)
{
document.getElementById(id).style.transform="scale(0.7)";
}
function res_out(id)
{
document.getElementById(id).style.transform="scale(1)";
}

Answer 3

The easiest way is to change the margin of the element half as fast as the size:

 var x = document.getElementById('mydiv'); x.onmouseover = function() { res_in(this.id); }; x.onmouseout = function() { res_out(this.id); }; function res_in(id) { document.getElementById(id).style.width = '70px'; document.getElementById(id).style.height = '70px'; document.getElementById(id).style.margin = '15px'; } function res_out(id) { document.getElementById(id).style.width = '100px'; document.getElementById(id).style.height = '100px'; document.getElementById(id).style.margin = '0px'; } 

 .mydiv { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: aqua; border-radius: 100px; transition: all 0.3s ease; } 

 <div class="mydiv" id="mydiv"> </div>