Какая математика стоит за -webkit-ракурсом?

Question

«Простой» вопрос, на который я не могу найти ответ - Что на самом деле делает -webkit-perspective математически?(Я знаю эффект, который он имеет, он в основном действует как элемент управления фокусным расстоянием) Например, что означает -webkit-perspective: 500?!?

Мне нужно найти на экране местоположение чего-то, что было перемещено,между прочим, -webkit-perspective

Answer 1

Модуль CSS 3D-преобразований * Рабочий проект 1002 * дает следующее объяснение:

перспектива ()

определяетматрица перспективной проекции.Эта матрица отображает куб просмотра на пирамиду, основание которой находится бесконечно далеко от зрителя, а вершина которой представляет положение зрителя.Видимая область - это область, ограниченная четырьмя краями области просмотра (часть окна браузера, используемая для визуализации веб-страницы между положением зрителя и точкой на расстоянии бесконечности от зрителя).Глубина, заданная в качестве параметра функции, представляет собой расстояние плоскости z = 0 от зрителя.Более низкие значения дают более уплощенную пирамиду и, следовательно, более выраженный эффект перспективы.Значение указывается в пикселях, поэтому значение 1000 дает умеренный ракурс, а значение 200 - экстремальное.Матрица вычисляется, начиная с единичной матрицы и заменяя значение в строке 3, столбце 4 значением -1 / глубиной.Значение для глубины должно быть больше нуля, в противном случае функция недействительна.

Это что-то из начала, если не совсем ясно.Первое предложение заставляет меня поверить, что статья о матрице перспективной проекции в Википедии может быть полезна, хотя в комментариях к этому посту выясняется, что могут быть некоторые небольшие различия между конвенциями рабочей группы CSS инайден в Википедии, поэтому, пожалуйста, проверьте их, чтобы избежать головной боли.

Answer 2

Выезд http://en.wikipedia.org/wiki/Perspective_projection#Diagram

После прочтения предыдущих комментариев, проведения исследований и тестирования я почти уверен, что это правильно.

Обратите внимание, что то же самое относится и к Y-координатам.

Преобразованный X = Оригинальный X * (Перспектива / (Перспектива - Z перевод))

например. Div имеет ширину 500 пикселей Перспектива 10000px Преобразование -5000 пикселей в направлении Z

Трансформированная ширина = 500 * (10000 / (10000 - (-5000)) Трансформированная ширина = 500 * (10000/15000) = 500 * (2/3) = 333px

Answer 3

@ Domenic Как ни странно, описание «Матрица вычисляется, начиная с единичной матрицы и заменяя значение в строке 3, столбце 4 значением -1 / глубина». уже удален из рабочего модуля CSS 3D Transforms . Возможно, в этом описании могли быть некоторые неточности.

Что касается вопроса, что означает число в перспективе () , я думаю, его можно рассматривать как расстояние между положением воображаемой камеры и экраном вашего компьютера.