我想在 x 轴上旋转 3d 时获得元素的实际高度。我将尝试用下面的图形来解释:
元素的正常高度:200px
100px 视角旋转 45 度时实际高度为 118px:
1000px视角旋转45度实际高度为138px:
计算此高度值的常规公式(无透视):
x = h * sin( Angular )
使用此公式高度必须为 142px。但它与这个值不同。可能透视会改变高度。但是我没有找到任何计算这个高度的公式。
有人知道吗?
最佳答案
我受益于 efe的注释和计算的旋转元素的实际 View 高度。
您可以通过示例查看此问题的答案:http://jsfiddle.net/TqJJL/3/
用这段代码计算实际高度:
// 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);
}
关于javascript - CSS3 rotate3d pr rotateX 获取元素的实际高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20837055/