Javascript 在透视模式下，如何计算旋转角度以使宽度适合所需大小？

我试图想出一种方法，通过CSS绕Y轴旋转透视图像，使最终可见宽度等于所需的像素数

例如，我可能希望旋转一个300px的图像，这样，在应用旋转和透视后，图像的宽度现在是原始图像的240px 80%。通过反复试验，我知道我可以设置transform:perspective300旋转-12.68，它将左上角点设置为-240px，这是使用图像的右侧作为原点

我不太明白如何对其进行反向工程，以便对于任何给定的图像宽度、透视图和所需的宽度，我都可以计算出必要的旋转

对于相同的300px图像，我现在希望它在旋转后的宽度为150px-获得必要角度需要进行什么计算

这里有一个游乐场，让你了解我在寻找什么，我已经复制了透视和旋转变换所做的数学，以计算最左侧点的最终位置，但鉴于矩阵数学和涉及的多个步骤，我还无法找出如何求解角度

常量calculateLeftTopPointAfterTransforms=透视、旋转、宽度=>{ //将度转换为弧度 常数=旋转*Math.PI/180； //把相机放好 常量cameraMatrix=数学矩阵[0,0，-透视]； //基于右中变换原点获取图像的左上点 常量leftMostPoint=数学矩阵[-width，-width/2，0]； 常数旋转矩阵=数学矩阵[ [Math.cos-rRad，0，-Math.sin-rRad]， [0, 1, 0], [Math.sin-rRad，0，Math.cos-rRad]， ]; //对点应用旋转 常量旋转点=math.MultipyRotateMatrix，最左点； 常量cameraProjection=math.subtractrotatedPoint，cameraMatrix； 常量PointInhogenizedCords=math.MultilyMath.matrix[ [1,0,0/透视图，0]， [0,1,0/透视图，0]， [0, 0, 1, 0], [0,0,1/透视图，0]， ]，cameraProjection.resize[4]，1； 常数最终点=[ math.SubsetPointInhomogenizedWord，math.index0 /math.SubsetPointInhomogenizedWord，math.index3， math.SubsetPointInhomogenizedWord，math.index1 /math.SubsetPointInhomogenizedWord，math.index3， ]; 返回终点； } //目标：给定desiredWidth中定义的百分比，计算变换图像填充红色背景显示的空间所需的旋转 //例如：在透视图300处的期望宽度为80，图像大小为300时，旋转需要为12.68，将左侧点置于300*.8=240。 //如何计算任意所需宽度、透视图和图像大小的旋转？ //找出一些款式 常量输入样式={width:50}； const PerspDemo==>{ const[desiredWidth，setDesiredWidth]=React.useState80； const[rotation，setRotation]=React.useState25； const[perspective，setPerspective]=React.useState300； const[imageSize，setImageSize]=React.useState300； const[transformedPointPosition，setTPP]=React.useState[0,0]； const-boxStyles={outline:'1px实心红色'，宽度：imageSize+'px'，高度：imageSize+'px'，边距：'10px'，位置：'relative'}； React.useffect=>{ 设置TPPCalculateLeftTopPoints传输后透视、旋转、图像大小 }，[旋转，透视]； 回来 图像大小 setImageSizee.target.value} 值={imageSize} /> 变换后所需的宽度为大小的% setDesiredWidthe.target.value} 值={desiredWidth} /> 旋转度 setRotatione.target.value} 值={旋转} /> 态度 setPerspectivee.target.value} 值={perspective} /> 无转换： 使用旋转和透视： {transformedPointPosition.toString} ; }; ReactDOM.render，document.getElementById'app'；

---

在没有矩阵计算的情况下，我会考虑用不同的方法来找到公式：

R = (p * cos(angle) * D)/(p - (sin(angle) * D))

其中p是透视图，角度是角度旋转，D是元素宽度，R是我们正在搜索的新宽度

如果我们有一个-45度的角度和一个等于100px的透视图，初始宽度为200px，那么新的宽度将是：58.58px

.盒子{ 宽度：200px； 高度：200px； 边框：1px实心； 背景： 线性梯度，右红色/58.58px 100%无重复； 位置：相对位置； } img{ 变换原点：右； }

---

如果你知道数学规则，你可以计算新的宽度并用js设置。试着看看这个：也许你可以问一些具体的数学问题community@red，对不起，我原来的问题一定不够清楚。我知道如何解宽度，我实际上是在解角度，这样

---

生成的图像将具有给定的宽度。我编辑了这个问题来澄清。我试着在math.stackexchange.com上提问，结果被认为不符合托皮奇·特马尼的要求，谢谢你的详细回答，但我认为你误解了这个问题。我已经能够看到给定角度和透视图的宽度，但是我正在尝试重新安排这个等式，这样，在你的例子中，给定所需的宽度R，我就可以计算出所需的角度。所以求角度，相对于宽度。很抱歉，如果原始问题不清楚，我将对其进行编辑以澄清。@BenSlinger我知道，正如最后所述，这就是我的答案中缺少的内容。我能够确定公式，但现在需要将其更改为用其他参数表示角度，但我们至少有一个公式，我们可以从开始啊，明白了，我不知道你的意思，抱歉！我感谢你的帮助@本斯林格我用一个公式做了第一次更新，以找到角度，但在一个特殊的情况下。我想这将是很难处理所有的情况，因为在某些情况下，它是不可能找到的角度，因为它没有定义这么多为您的工作-我不知道如何使这项工作时，透视不等于图像大小，虽然，这通常不会是这样的情况。我也不太清楚，在你的最后一个方程中，如何确定R的值，R不是从前面的角度推导出来的吗？