2011-12-23 5 views
3

Это может быть невозможно, но у меня есть DIV, который я трансформирую с помощью CSS3.Изменение {transform-origin: x, y;} от элемента к родительскому DIV?

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

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

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

enter image description here

ответ

3

Просто обновление «преобразование происхождения» всякий раз, когда вы хотите, чтобы вытолкнуть модальное окно. Например:

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

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

http://jsfiddle.net/GprNe/enter image description here

+0

Это ответил на мой вопрос, отлично! Именно этот эффект я и собирался. Спасибо, Дуопиксель! знак равно –

Смежные вопросы