Question

This may not be possible, but I have a DIV that I am transforming using CSS3.

#mydiv.fallback {
    -webkit-transform:           scale(.9);
    -webkit-transform-origin:    center;
}

Works like a charm. Except, I’m trying to create an effect similar to Mac OSX’s Timemachine (faux 3D effect), where the DIV falls back in the background. For this to work aesteitcally, I need the transform-origin to NOT use it’s element’s center, but the user’s web browser’s center. It would work even if I was able to change it to use it’s parent’s elements coordinates for its transform.

Not sure if this is possible or not sadly. Quick image to help illustrate.

Answer 1

Just update ‘transform-origin’ whenever you want to pop out the modal window. For example:

function modal() {
  var transOrigin = window.innerHeight/2 + document.body.scrollTop;
  container.style.webkitTransformOrigin = "50% " + transOrigin + "px";
}

Here is a working example for webkit.

http://jsfiddle.net/GprNe/