假设我们有一个500x500px大小的div,我们将它在x轴上通过css旋转45度,考虑到webkit-perspective值为1600px.
您如何计算显示的梯形的绝对尺寸?(宽度,最大高度,角度)
我只计算出一个计算宽度但不考虑透视的公式,所以值有所不同(JavaScript):
var absoluteWidth = Math.cos(45 * (Math.PI / 180)) * 500);
Run Code Online (Sandbox Code Playgroud)
编辑:这是关于-webkit-perspective函数的规范:
透视图(<编号>)
指定透视投影矩阵.该矩阵将观察立方体映射到金字塔上,该金字塔的底部与观察者无限远,其峰值代表观察者的位置.可视区域是由视口的四个边缘限定的区域(浏览器窗口的一部分,用于在观察者的位置和距观察者无限远的点之间渲染网页).作为函数的参数给出的深度表示z = 0平面距观察者的距离.较低的值会产生更平坦的金字塔,因此会产生更明显的透视效果.该值以像素为单位,因此值1000表示适度缩短,值200表示极端量.通过以单位矩阵开始并用值-1 /深度替换第3行第4列的值来计算矩阵.深度值必须大于零,否则该函数无效.
关于"透视投影矩阵",这是我在维基百科上发现的:http://en.wikipedia.org/wiki/3D_projection#Perspective_projection