我申请后如何检索宽度和高度属性transform: rotate(45deg);?
比如,旋转后11x11平方变为17x17(Chrome结果),但javascript仍然返回原始宽度/高度 - 10x10.
我怎么得到这个17x17?
我试图想出一种通过 CSS 围绕 Y 轴透视图像旋转图像的方法,以便最终的可见宽度等于所需的像素数。
例如,我可能想要旋转300px图像,以便在应用旋转和透视后,图像的宽度现在为240px(原始宽度的 80%)。通过反复试验,我知道我可以设置transform: perspective(300) rotateY(-12.68)并将左上角的点放在-240px(这是使用图像的右侧作为原点)
我不太清楚如何对其进行逆向工程,以便对于任何给定的图像宽度、透视和所需宽度,我可以计算必要的旋转。
例如。对于同一张300px图像,我现在希望它的旋转后宽度为150px- 获得必要角度所需的计算是什么?
这是一个游乐场,可以让您了解我正在寻找的内容,我复制了透视和旋转变换完成的数学来计算最左边点的最终位置,但我无法弄清楚给出如何在给定矩阵数学和涉及的多个步骤的情况下求解角度。
https://repl.it/@BenSlinger/PerspectiveWidthDemo
const calculateLeftTopPointAfterTransforms = (perspective, rotation, width) => {
// convert degrees to radians
const rRad = rotation * (Math.PI / 180);
// place the camera
const cameraMatrix = math.matrix([0, 0, -perspective]);
// get the upper left point of the image based on middle right transform origin
const leftMostPoint = math.matrix([-width, -width / 2, 0]); …Run Code Online (Sandbox Code Playgroud)