计算CSS 3D rotationX变换的高度

Question

我希望在对其应用了rotationX变换后，找出特定宽度和高度的元素高度。

在给定所需高度的情况下，能够找出元素旋转X变换的角度是理想的。

Answer 1

rotateX()保留x坐标。 y坐标与旋转角度的余弦进行缩放：

new_height = old_height * cos(angle)

另一种方式是：

angle = arc cos(new_height / old_height)

Answer 2

在对css 3D变换应用后，找到了两种查找DOM元素尺寸的方法。

1.使用element.getBoundingClientRect()，在变换应用后，将返回一个ClientRect对象，其中包含元素的正确尺寸

   {
       bottom: 90.07061767578125
       height: 90.07061767578125
       left: 0
       right: 891
       top: 0
       width: 891
    }

1. 名为domvertices的模块将返回DOM元素的4个角顶点的xyz个位置，占任何转换符：

   {     a：{x：，y：，z：}，     b：{x：，y：，z：}，     c：{x：，y：，z：}，     d：{x：，y：，z：} }