Изменение {transform-origin: x, y;} от элемента к родительскому DIV?

Question

Это может быть невозможно, но у меня есть DIV, который я преобразовываю с использованием CSS3.

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

Работает как шарм. За исключением того, что я пытаюсь создать эффект, похожий на Timemachine Mac OSX (искусственный 3D-эффект), где DIV возвращается на задний план. Чтобы это работало эстетически, мне нужен transform-origin, чтобы НЕ использовать центр своего элемента, а центр веб-браузера пользователя. Это работало бы, даже если бы я мог изменить его, чтобы использовать координаты элементов его родителя для его преобразования.

Не уверен, возможно ли это или нет, к сожалению. Быстрое изображение, чтобы помочь проиллюстрировать.

Answer 1

Просто обновите 'transform-origin' всякий раз, когда вы хотите открыть модальное окно. Например:

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

Вот рабочий пример для webkit.

http://jsfiddle.net/GprNe/