CODEWITHSUNDEEP
animationcsswebkittransform
Lord Varlin
Lord Varlin

Reputation: 834

Changing {transform-origin: x,y;} from element to parent DIV?

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.

enter image description here

Upvotes: 4

Views: 3217

Answers (1)

methodofaction
methodofaction

Reputation: 72385

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/enter image description here

Upvotes: 3

Related Questions