Develop Reference

CSS advanced 3D rotation control

I am currently trying to figure out a way to rotate an object along axis relative to the user and not relative to the object. I'm doing this with Javascript (jQuery) and CSS transform rotate.
I have built a codepen for to test it out.
var bX = 0; //bufferX (user scroll input)
var bY = 0; //bufferY (user scroll input)
var cX = 0; //currentX (effective X rotation)
var cY = 0; //currentY (effective Y rotation)
var bBX = 0; // same second rotation properties
var bBY = 0;
var cBX = 0;
var cBY = 0;
var cBZ = 0; // currentZ (effective Z rotation)
var pi = 3.1416
// Fidget animation
function fidget() {
if (!(bX + bY == 0)) {
var dX = bX * 0.1; // how much we rotate this frame
var dY = bY * 0.1;
cX = (cX + dX) % (2 * pi); // set rotation value
cY = (cY + dY) % (2 * pi);
bX -= dX; // update buffer
bY -= dY;
}
$('#one').css('transform', 'rotateX(' + cX + 'rad) rotateY(' + cY + 'rad)');
window.requestAnimationFrame(fidget);
}
function fidgetB() {
if (!(bBX + bBY == 0)) {
var dBX = bBX * 0.1;
cBX = (cBX + dBX) % (2 * pi);
var rBY = Math.cos(cBX); //Y ratio
var rBZ = Math.sin(cBX); //Z ratio
var dBY = bBY * 0.1; // deltaY
var dBZ = bBY * 0.1;
cBY = (cBY + rBY * dBY) % (2 * pi); // current
cBZ = (cBZ - rBZ * dBZ) % (2 * pi);
bBX -= dBX; // buffer
bBY -= (dBY);
}
$('#two').css('transform', 'rotateX(' + cBX + 'rad) rotateY(' + cBY + 'rad) rotateZ(' + cBZ + 'rad)');
window.requestAnimationFrame(fidgetB);
}
var init = function () {
// Fidget
requestAnimationFrame(fidget);
requestAnimationFrame(fidgetB);
// scroll detection script
!function(window,document){var prefix="",_addEventListener,support;function _addWheelListener(elem,eventName,callback,useCapture){elem[_addEventListener](prefix+eventName,"wheel"==support?callback:function(originalEvent){!originalEvent&&(originalEvent=window.event);var event={originalEvent:originalEvent,target:originalEvent.target||originalEvent.srcElement,type:"wheel",deltaMode:"MozMousePixelScroll"==originalEvent.type?0:1,deltaX:0,deltaY:0,deltaZ:0,preventDefault:function(){originalEvent.preventDefault?originalEvent.preventDefault():originalEvent.returnValue=!1}};return"mousewheel"==support?(event.deltaY=-.025*originalEvent.wheelDelta,originalEvent.wheelDeltaX&&(event.deltaX=-.025*originalEvent.wheelDeltaX)):event.deltaY=originalEvent.deltaY||originalEvent.detail,callback(event)},useCapture||!1)}window.addEventListener?_addEventListener="addEventListener":(_addEventListener="attachEvent",prefix="on"),support="onwheel"in document.createElement("div")?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll",window.addWheelListener=function(elem,callback,useCapture){_addWheelListener(elem,support,callback,useCapture),"DOMMouseScroll"==support&&_addWheelListener(elem,"MozMousePixelScroll",callback,useCapture)}}(window,document);
window.addWheelListener(window, function (e) {
e.preventDefault();
bY -= e.deltaX / window.innerWidth;
bX += e.deltaY / window.innerWidth;
bBY -= e.deltaX / window.innerWidth;
bBX += e.deltaY / window.innerWidth;
});
};
jQuery(document).ready(function ($) {
init();
});
html, html * {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color:white;
text-align: center;
font-size: 6vmin;
font-family: sans-serif;
}
#intro {
position:absolute;
width: 100%;
height: 100%;
-webkit-perspective: 200vmax;
perspective: 200vmax;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
#one {
left: 33%;
}
#two {
left: 66%;
}
.square {
background-color: black;
width: 50vmin;
height: 50vmin;
line-height: 50vmin;
top: 50%;
margin-top: -25vmin;
margin-left: -25vmin;
transform-style: preserve-3d;
position: absolute;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform-origin: 50% 37%;
transform-origin: 50% 37%;
/* -webkit-animation: rotate 25s linear infinite;
animation: rotate 25s linear infinite; */
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
<div id="one" class="square">Object</div>
<div id="two" class="square">User</div>
</div>
[https://codepen.io/rsepierre/pen/XqVJKR][1]
To control the rotation of any of those square you scroll with the mousewheel/touchpad (shift+wheel to scroll Y axis. Would add touchsupport when sorted out)
The left square's rotation is relative to the object:
if you only scroll left<->right, no problem, it works. Same for up<->down.
Now if you lay the item flat (scroll 90° down<->up ) and then you try to rotate on the other axis ( left<->right ), it will rotate on itself. Which mean that to the user it will appear like a Z-axis rotation (like a clock).
The right square's rotation is my attempt to make the rotation
relative to the user :
if you scroll left<->right, no problem, it works. Same for up<->down.
if you lay the item flat again (scroll 90° down<->up ) and then you try to rotate on the other axis ( scroll left<->right ), it will rotate relative to the user.
The item rotates on the "Z" axis, but will appears like a Y axis rotation from the users perspective.
And it is actualy working :
IF you only make scroll up<->down by 90° steps and never get in between.
Even if you get a 89° angle instead of a 90° angle when you scroll up<->down, it will slowly become a mess.
My best bet for a solution :
I came to understand that 3D rotations are not commutative (the order in which you apply rotations will impact the final result, this is why only the Y-axis rotation gets screwed up, and the X-axis rotation never does).
One easy fix would be to just add each new user input into a new rotation (rotateX(100) rotateY(5) rotateY(20) rotateX(105)... indefinitly.
But obviously i'm doing this 60times per second, it would very quickly become the worste CPU/GPU leek you've seen in a while.
Because of this I believe that somehow I should do the all the math behind the scene in JS and apply only one rotate3D(X,Y,Z,angle) css rotation.
Thing is I don't know anything about the math behind rotation matrices.
I found this converter to translate 3D rotation things into others 3D rotation things, but I think I would need to understand what is what to begin to do any math.
Any help much apreciated.

Found this stackoverflow post. It's not exactly the same situation but really the same problem.
Will post updated code when I get there.
meanwhile :
Rotating CSS cube on fixed axes

Rotating an object 45 degrees on specified onkeydown

I have been working on a game project for a while and have hit a snag with a particular control. I have decided to change some of the mechanics a bit to deal with this. I had written a chunk of code to make an object rotate with my mouse movement but now I need to make my object rotate on keypress.
I want to make it rotate 45 degrees clockwise when I press the right arrow key, and 45 degrees counter clockwise on left arrow key press. I have the input key call all written up I just need to translate my old code to the new code.
This is my existing code
window.onmouseclick = function(event) {
var box = hypeDocument.getElementById('bolt')
cx = event.pageX; // Mouse X
cy = event.pageY; // Mouse Y
bx = parseInt(hypeDocument.getElementById('group').style.left);
by = parseInt(hypeDocument.getElementById('group').style.top);
tx = hypeDocument.getElementProperty(box, 'left') +
(hypeDocument.getElementProperty(box, 'width')/2) + bx;
ty = hypeDocument.getElementProperty(box, 'top') +
(hypeDocument.getElementProperty(box, 'height')/2) + by;
angle = Math.atan2((cy-ty),(cx-tx)) * (180/Math.PI) ; // AHHHH MATH!
hypeDocument.setElementProperty(box, 'rotateZ', angle)
}
hypeDocument.setElementProperty(box, 'rotateZ', angle) // hype api code for
box.style.webkitTransform = "rotate(" + angle + "deg)";
box.style.mozTransform = "rotate(" + angle + "deg)";
box.style.transform = "rotate(" + angle + "deg)";
This is the code I want to change, as I state in the comment the last line is hype api for the 3 box styles below it to help anybody who reads this understand what that line is.

I'm not sure about the hypedocument markup, but I put this together for you. Can you extract the meaningful parts re: the keycodes to make it work with your project?
window.addEventListener('keyup',function(e) {
var keyCode = e.keyCode,
dir = '',
box = document.getElementById('box');
if (keyCode == 39) {
dir = 'left';
} else if (keyCode == 37) {
dir = 'right';
}
box.setAttribute('data-dir','');
setTimeout(function() {
box.setAttribute('data-dir',dir);
})
})
#box {
width: 100px;
height: 100px;
background: black;
transform: rotate(0);
}
[data-dir="left"] {
animation: left .5s forwards;
}
[data-dir="right"] {
animation: right .5s forwards;
}
#keyframes left {
from {
transform: rotate(0);
}
to {
transform: rotate(90deg);
}
}
#keyframes right {
to {
transform: rotate(-90deg);
}
}
<div id="box"></div>

CSS transformed object position fix

It was hard to explain with words, so I tried to explain with graphics.
There is a div here with its style.
Now if I change its width with 400px here...
because of it is a transformed (rotated) object, something happens and "TOP-LEFT" corner of it, moves down.
Now I want to keep its "TOP-LEFT" position fixed. But I couldnt find a correct correlation to fix it. I guess I need a trigonometric formula using rotation angle.
Also I know it is related with 'scale' and 'transform-origin' and can be easily done with them but I dont want to use any other transformation parameters. Especialy 'transform-origin' because of lack of browser support.
Does anybody here who can help me with the correlation which will be used in JavaScript to fix its corner. Maybe getBoundingClientRect() can be used for this.
Here is the FIDDLE
Thank you.

CSS transforms are really matrices, where transforming the elements are done with
matrix(a, b, c, d, tx, ty).
Then someone clever figured out it would be too complicated for webdesigners to understand such a matrix, so they added shorthand solutions, like transform: rotate() etc.
In other words, if you view the computed styles, there won't be a style whith the rotated degrees, and you can't do element.style.transform and get the rotation angle back again, all you'll get is the matrix.
Since the browsers use a matrix, all browsers that support CSS transform, also support changing the origin of that transform, so if you can rotate the element, you can change the origin.
The exception is Microsoft's filters, but even there you can rotate and change the origin, it's just a little more complicated to figure out.
As it makes no sense to not just change the origin of the transformation, and calculating it yourself would do the exact same thing, only a hundred times more complicated, you should really just add this to the CSS to solve the issue
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
FIDDLE
Just to confirm this, looking at MDN, at the bottom of the following pages, you'll find browser support, and it's just about the same for transform and transform-origin, as you generally never have one without the other
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
As a final note, if it were me, I wouldn't even worry about IE8 and below, as those users are probably used to things looking weird these days anyway.

If you don't want to use transform-origin you can do this :
FIDDLE
$(function () {
var isScaled = false;
$('#box').on('click', function () {
if (isScaled) {
isScaled = false;
$(this).width('200').css({'top':'50px','left':'50px'})
} else {
isScaled = true;
$(this).width('400').css({'top':'24px','left':'46px'});
}
})
});

As other people has stated, you can use transform-origin. However, if you still want to do it via Javascript, I've done it for you in this jsfiddle.
Basically, what I do is to calculate the rotated position of the top left corners of each figure using the matrix transform for rotations (simplified), assuming the center point of the figures as (0, 0), which is, basically, what the browser does. Once I calculate the new positions for the corners, I calculate the difference, and substract that difference from the original left and top positions. I hope you find it instructive.
$(function () {
var isScaled = false;
var box = $('#box');
box.on('click', function () {
if (isScaled) {
isScaled = false;
$(this).width('200');
placeBox(400, 200);
} else {
isScaled = true;
$(this).width('400')
placeBox(200, 400);
}
});
var left = parseInt(box.css('left'));
var top = parseInt(box.css('top'));
var angle = (345 / 360) * 2 * Math.PI; //in radians;
function placeBox(oldWidth, newWidth) {
var midHeight = box.height() / 2;
var midOldWidth = oldWidth / 2;
var midNewWidth = newWidth / 2;
var cos = Math.cos(angle);
var sin = Math.sin(angle);
//rotation center coordinates
var cx1 = left + midOldWidth;
var cx2 = left + midNewWidth;
var cy = top + midHeight;
var mx1 = -midOldWidth * cos + midHeight * sin;
var my1 = -midOldWidth * sin - midHeight * cos;
var mx2 = -midNewWidth * cos + midHeight * sin;
var my2 = -midNewWidth * sin - midHeight * cos;
var difX = cx2 + mx2 - cx1 - mx1;
var difY = my2 - my1;
//now, position the element where it should:
box.css({
left: (left - difX) + 'px',
top: (top - difY) + 'px'
});
}
})

This Fiddle is showing the problem: http://jsfiddle.net/y343Z/19/
If you change the "shadow" size, it is moving alongside it's X Y axis.
Here one possibile soution.
http://jsfiddle.net/y343Z/18/
Just place shadow inside of the tranformed element:
<div id="box">
<div id="box-shadow" style="width:400px;"></div>
</div>
With this CSS:
#box {
width:200px;
height:200px;
position:absolute;
top:50px;
left:50px;
-moz-transform:rotate(345deg);
-webkit-transform:rotate(345deg);
-o-transform:rotate(345deg);
-ms-transform:rotate(345deg);
}
#box-shadow {
width: inherit;
height: inherit;
background-color:silver;
position:absolute;
opacity: 0.3;
}
#box {
background-color:orange;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Just to clarify: I know that is not desired for a real shadow, since this has to be outside of the transformed box. But i think your shadow object is a "helper" that contains handles like in your screenshot.
Edit:
As other user posted, you may also use transform-origin: http://jsfiddle.net/y343Z/20/
transform-origin: left center 0;

Manually stepping through CSS animation with JavaScript

If I have a CSS keyframe animation like this
#keyframes flash-red {
50% {
background: #f00;
}
}
#goflash.anm-flash {
animation-name: flash-red;
animation-duration: .5s;
background: rgba(255, 0, 0, 0);
}
Then I can always trigger the animation like this:
var gf = document.querySelector("#goflash");
gf.classList.remove("anm-flash");
setTimeout(function() {
gf.classList.add("anm-flash");
}, 50);
Is there any way to override the animation-duration/animation-timing-function to be dependent on JavaScript? I'd like to be able to say something like gf.animate("flash-red", "50%") to make the background of gf red, or gf.animate("flash-red", "75%") to make the background more like rgba(255, 0, 0, .5).
Ideally, the same technique would work for transitions. gf.transitionTo("new-class", "50%") would show the element as half way transitioned.
Obviously the flash-red is just an example—I'd like to be able to do this with any animation.

With the built-in animation:
Unfortunately, no
The internals of the transition isn't exposed for JavaScript so you cannot tap into it to set or get the data. And this is for a purpose - if the data were exposed it would mean reduced efficiency as the JavaScript event queue had to be updated. As JS is single-threaded and the animation goes on a separate thread you'll would soon loose the benefit of it running in compiled code internally on a separate thread.
You can however make your own transitions. This involve calculation transitions yourselves.
This is not as complicated as it sounds like as you simply use an interpolation formula for what you want to animate:
current = source + (destination - source) * fraction;
For example, for color you can use it with the color component. Lets assume we have color objects with properties r, g, b:
var color1 = {r: 100, g: 200, b: 55}; //some random color
var color2 = {r: 0, g: 100, b: 100};
var fraction = 0.5; //0-1
Here the current RGB would be:
r = color1.r + (color2.r - color1.r) * fraction;
g = color1.g + (color2.g - color1.g) * fraction;
b = color1.b + (color2.b - color1.b) * fraction;
For positions:
var pos1x = 100;
var pos1y = 100;
var pos2x = 500;
var pos2y = 250;
var fraction = 1; //0-1
posX = pos1x + (pos2x - pos1x) * fraction;
posY = pos1y + (pos2y - pos1y) * fraction;
And so forth.
By making wrapper functions you can easily calculate these and even put them in a loop to animate them.
Example function for setting transition between color 1 and color 2.
Style can be ie. backgroundColor, color etc.:
function setColor(element, style, color1, color2, fraction) {
var r = color1.r + (color2.r - color1.r) * fraction;
var g = color1.g + (color2.g - color1.g) * fraction;
var b = color1.b + (color2.b - color1.b) * fraction;
element.style[style] = 'rgb(' + (r|0) + ',' + (g|0) + ',' + (b|0) + ')';
}
(the r|0 is simply cutting off the decimal part).
And for position, for example:
var pos1 = {x: 0, y: 0};
var pos2 = {x: 200, y: 0};
function setPosition(element, pos1, pos2, fraction) {
var x = pos1.x + (pos2.x - pos1.x) * fraction;
var y = pos1.y + (pos2.y - pos1.y) * fraction;
element.style.left = x + 'px';
element.style.top = y + 'px';
}
A simple demo (use Chrome or Aurora 23 to see sliders, slider comes in next version of FF 23).
Fiddle
Manually set transition at any point between source and destiny, or animate them.

say you have only one animation over your element gf, you can simply control it with animation-delay and animation-play-state:
gf.__proto__.animate = function(percent) {
this.style["animation-play-state"] = "paused";
this.style["animation-delay"] = (
(parseFloat(this.style["animation-duration"] || 1) * -percent) + "s"
);
};
and you can get the computed style as following:
window.getComputedStyle(gf).background
to step through at any speed:
(function animation(time) {
gf.animate( ((time || 0) % desireSpeed ) / desireSpeed );
requestAnimationFrame(animation);
})();
note: this will override animation-delay from css so you'll probably want to keep it in a vairable and add it as an offset in gf.__proto__.animate().

You can't do that as you want it.
Your only posibility is to change play-state after a given delay.
In your case, since the animation lasts 0.5 seconds, to get the animation at 50% you should set a timeout of 0.25 seconds and then set animation-play-state : paused.
Of course that won't be exactly at 50%, don't trust the precision of this method.
editing
Added demo for webkit:
fiddle
The HTML is trivial
<div id="goflash">TEST</div>
<input type="button" value="animate" onclick="animate()">
And the CSS easy
#goflash {
width: 200px;
height: 200px;
left: 35px;
top: 35px;
position: absolute;
background-color: red;
}
.anm-flash {
-webkit-animation-name: flash;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes flash {
from { -webkit-transform: rotate(0deg);
background-color: red; }
50% { -webkit-transform: rotate(120deg);
background-color: yellow;}
to { -webkit-transform: rotate(360deg);
background-color: red;
}
}
And the javascript is an extension from what you supplied:
function animate () {
var gf = document.querySelector("#goflash");
gf.classList.remove("anm-flash");
setTimeout(function() {
gf.classList.add("anm-flash");
gf.style.webkitAnimationPlayState = "running";
}, 50);
setTimeout(function() {
gf.style.webkitAnimationPlayState = "paused";
}, 2550);
}
You reset the class, after a small pause start the animation, and a calculated delay after the start, you stop it.
Since the animation time was 5s,and the initial delay 50 ms, the second delay has to be (5000/2) + 50.
Since you have set now the play state to paused, to de able to re-run the animation you have to set the state to running again.

Perhaps using CSS DOM to parse animation's intent (if that's even possible?) and then reconstructing everything in JavaScript.
But that's no mean feat!
I wonder if a CSS preprocessor would help constructing code like this. This is very much all in theory.

Yes,
You can just overide the duration or timing of an animation. Hope I understood what you want to do:
http://jsfiddle.net/SEHyW/
var gf = document.querySelector("#goflash"),
animationDuration = '1s'
gf.classList.remove("anm-flash");
setTimeout(function() {
gf.classList.add("anm-flash");
gf.style["-webkit-animation-duration"] = animationDuration;
}, 1000);

Does there exist a method or plugin to allow for rotate transforms to respect div boundries?

By default, the css rotate property seems to occur after tag spacing. For instance, if you have two divs in a column and you rotate one, they overlap. It's possible I completely missed some aspect of css or html that handles this issue, have I?
The obvious solution seems to be to write some javascript to manage the placement of elements post rotate. Does a plugin exist that helps handle this spacing? The only thing close I could locate was the jquery-rotate plug, but it does not seems to provide any functionality with regard to spacing.
Relevant html/css demonstrating the spacing problem.
HTML
<div class="red-box rotate-right"></div>
<div class="blue-box"></div>​
CSS
.rotate-right {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.red-box{
height: 50px;
width: 100px;
background: red;
}
.blue-box{
height: 50px;
width: 100px;
background: blue;
}

Alright, beware this is ugly to look at.
First, I used code from CSS-Tricks to get the angle of rotation. Then, I use some algebra to find the distance (from the center of the rotated element) to the sides of a box that contains the element. Then I add margins to the edge of the rotated element to create (or remove) extra space where needed. This also takes into account the original margins (if any).
Usage:
After rotating an element, call $(rotatedElement).space([grow],[shrink]). See code comments for argument descriptions.
jQuery.fn.space = function(grow,shrink){
// grow = Grow area around element to fit? (true/false)
// shrink = Shrink area around element to fit? (true/false)
var el = this.get(0);
if(typeof(grow)=='undefined'){
grow = true; // Default to grow extra space when needed
}
if(typeof(shrink)=='undefined'){
shrink = false; // Default to not shrink at all
}
//Get angle of rotated element
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform");
var v = tr.split('(')[1].split(')')[0].split(',');
var scale = Math.sqrt(v[0]*v[0] + v[1]*v[1]);
var angle = Math.round(Math.atan2(v[1], v[0]) * (180/Math.PI));
//Save or recall original margins
var m = new Array();
if(el.getAttribute('margins')==null){
m[0] = st.getPropertyValue("margin-left").match(/\d+/);
m[1] = st.getPropertyValue("margin-right").match(/\d+/);
m[2] = st.getPropertyValue("margin-top").match(/\d+/);
m[3] = st.getPropertyValue("margin-bottom").match(/\d+/);
el.setAttribute('margins',m[0]+","+m[1]+","+m[2]+","+m[3]);
} else {
m = el.getAttribute('margins').split(',');
console.log(m);
}
//Get center coords
var cx = st.getPropertyValue("width").match(/\d+/)/2;
var cy = st.getPropertyValue("height").match(/\d+/)/2;
//Convert radian values to degrees
function toDeg(angle){
return angle*Math.PI/180;
}
// Coords of the corners
// (starting from top-left and proceeding clockwise)
// relative to the center of the element
// c[cornerID][x|y]
var c = [ [Math.round(cx*Math.cos(toDeg(angle-180))
+ cy*Math.cos(toDeg(angle-90))),
Math.round(cx*Math.sin(toDeg(angle-180))
+ cy*Math.sin(toDeg(angle-90)))],
[Math.round(cx*Math.cos(toDeg(angle))
+ cy*Math.cos(toDeg(angle-90))),
Math.round(cx*Math.sin(toDeg(angle))
+ cy*Math.sin(toDeg(angle-90)))],
[Math.round(cx*Math.cos(toDeg(angle))
+ cy*Math.cos(toDeg(angle+90))),
Math.round(cx*Math.sin(toDeg(angle))
+ cy*Math.sin(toDeg(angle+90)))],
[Math.round(cx*Math.cos(toDeg(angle-180))
+ cy*Math.cos(toDeg(angle+90))),
Math.round(cx*Math.sin(toDeg(angle-180))
+ cy*Math.sin(toDeg(angle+90)))]
];
var elx = ([c[0][0], c[1][0], c[2][0], c[3][0]]).sort(function(a,b){
return(a*1)-(b*1);});
var ely = ([c[0][1], c[1][1], c[2][1], c[3][1]]).sort(function(a,b){
return(a*1)-(b*1);});
var b = [-elx[0], elx[3], -ely[0], ely[3]]; // [Left, Right, Top, Bottom]
if(grow){
if(b[0]-cx>0) el.style.marginLeft = (m[0] + b[0]-cx) + "px";
if(b[1]-cx>0) el.style.marginRight = (m[1] + b[1]-cx) + "px";
/*}
if(growY){ */
if(b[2]-cy>0) el.style.marginTop = (m[2] + b[2]-cy) + "px";
if(b[3]-cy>0) el.style.marginBottom = (m[3] + b[3]-cy) + "px";
}
if(shrink){
if(b[0]-cx<0) el.style.marginLeft = (m[0] + b[0]-cx) + "px";
if(b[1]-cx<0) el.style.marginRight = (m[1] + b[1]-cx) + "px";
/*}
if(shrinkY){ */
if(b[2]-cy<0) el.style.marginTop = (m[2] + b[2]-cy) + "px";
if(b[3]-cy<0) el.style.marginBottom = (m[3] + b[3]-cy) + "px";
}
}
You may wish to split (grow and shrink) into (growX, growY and shrinkX, shrinkY) depending on what's going on in your live site, so you don't break your layout. To do so, just adjust/add the arguments and defaults at the top, and the if(grow)/if(shrink) statements at the bottom.