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 transform 3D:

http://jsbin.com/iderag

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

Answer 2

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

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

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

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