z в translate3d

Question

Может кто-нибудь объяснить или указать мне на пример, где "Z" в translate3d (преобразование webkit) используется? Я успешно использовал translate3d(x,y,0) чтобы получить аппаратно ускоренную 2D-анимацию в мобильном Safari, но сейчас я пытаюсь масштабировать с помощью параметра z, но это, похоже, не дает никакого эффекта...

elem.style.WebkitTransform = 'translate3d(100px,0,0)'; // this works as expected
elem.style.WebkitTransform = 'translate3d(0,0,100)'; // nothing happens
elem.style.WebkitTransform = 'translate3d(0,0,100px)'; // nothing happens
elem.style.WebkitTransform = 'scale(1.2, 1.2)'; // works but slow on ios

Sidenote: я пытаюсь создать небольшой скрипт для масштабирования, который без проблем работает на ios.

Answer 1

Не забудьте установить перспективу -webkit в ячейке с содержимым. 800 - это хорошее начальное значение. Если поле исчезнет, ​​уменьшите его, возможно, оно больше, чем область просмотра.

В блоге Surfin' Safari есть статья, в которой впервые были изобретены 3D-преобразования:

-вебкит-перспектива используется для создания иллюзии глубины; это определяет, как вещи изменяют размер, основываясь на их z-смещении от плоскости z=0. Вы можете думать об этом, как будто вы смотрите на страницу на расстоянии p. Объекты на плоскости z=0 отображаются в их нормальном размере. Что-то со смещением az в p/2 (на полпути между зрителем и плоскостью z=0) будет выглядеть в два раза больше, а что-то со смещением az в -p будет выглядеть вдвое большим. Таким образом, большие значения дают немного ракурса, а маленькие значения - ракурса. Значения между 500px и 1000px дают приемлемый результат для большинства контента.

Подробнее здесь: http://www.webkit.org/blog/386/3d-transforms/

Answer 2

Я сделал это для вас, чтобы показать, как работает webkit transform 3D:

http://jsbin.com/iderag

Я надеюсь, что это поможет вам. Я предполагаю, что у вас нет -webkit-perspective в вашем body или родительский тег.