Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/390.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript CSS3 rotate3d pr rotateX获取元件的实际高度_Javascript_Css_Css Transforms_Perspective - Fatal编程技术网

Javascript CSS3 rotate3d pr rotateX获取元件的实际高度

Javascript CSS3 rotate3d pr rotateX获取元件的实际高度,javascript,css,css-transforms,perspective,Javascript,Css,Css Transforms,Perspective,我想得到在x轴上旋转3d时元素的实际高度。我将尝试用以下图形进行解释: 元素的正常高度:200px 以100px视角旋转45度时,实际高度为118px: 以1000px视角旋转45度时,实际高度为138px: 计算该高度值的标准公式(无透视): x=h*sin(角度) 此公式的高度必须为142px。但它与这个值不同。可能透视图会改变高度。但是我没有找到计算这个高度的公式 有人知道吗?我从他的评论中获益,并计算了旋转元素的真实视图高度 有关于的解决方案的技术说明 您可以通过以下示例查看此问题

我想得到在x轴上旋转3d时元素的实际高度。我将尝试用以下图形进行解释:

元素的正常高度:200px

以100px视角旋转45度时,实际高度为118px:

以1000px视角旋转45度时,实际高度为138px:

计算该高度值的标准公式(无透视):

x=h*sin(角度)

此公式的高度必须为142px。但它与这个值不同。可能透视图会改变高度。但是我没有找到计算这个高度的公式

有人知道吗?

我从他的评论中获益,并计算了旋转元素的真实视图高度

有关于的解决方案的技术说明

您可以通过以下示例查看此问题的答案:

使用此代码计算实际高度:

// initial coordinates
var A = 0;
var B = width; // default size of element
// new coordinates
A = calc(A, angle*Math.PI/180, p);
B = calc(B, angle*Math.PI/180, p);
// translate back
A += width/2;
B += width/2;
if(B < A) { var tmp = A; A = B; B = tmp; } // swap

var realHeight = B-A;

function calc(oldx, angle, p) {
    var x = Math.cos(angle) * oldx;
    var z = Math.sin(angle) * oldx;

    return x * p / (p+z);
}
//初始坐标
var A=0;
var B=宽度;//元素的默认大小
//新坐标
A=计算值(A,角度*Math.PI/180,p);
B=计算值(B,角度*Math.PI/180,p);
//翻译回
A+=宽度/2;
B+=宽度/2;
如果(B
如果可以通过DOM访问此高度(“渲染高度”),这可能会有所帮助。