Вычислить абсолютные размеры div, повернутого в перспективе с помощью css3

допустим, у нас есть div размером 500x500 пикселей, и мы поворачиваем его по оси x с помощью CSS на 45 градусов, учитывая значение перспективы webkit 1600 пикселей.

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

Я только придумал формулу, которая вычисляет ширину, но без учета перспективы, поэтому значение отличается на несколько пикселей (JavaScript):

var absoluteWidth = Math.cos(45 * (Math.PI / 180)) * 500);

РЕДАКТИРОВАТЬ: Вот спецификация о -webkit-перспектива функция:

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

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

Что касается «матрицы перспективной проекции», это то, что я нашел в Википедии: http://en.wikipedia.org/wiki/3D_projection#Perspective_projection

17
задан Elias 28 December 2011 в 10:35
поделиться