相关疑难解决方法(0)

变换后的宽度/高度

我申请后如何检索宽度和高度属性transform: rotate(45deg);

比如,旋转后11x11平方变为17x17(Chrome结果),但javascript仍然返回原始宽度/高度 - 10x10.

我怎么得到这个17x17?

html javascript css jquery css3

28
推荐指数
3
解决办法
4万
查看次数

在透视模式下如何计算旋转角度以使宽度适合所需尺寸?

我试图想出一种通过 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)

javascript css math perspective css-transforms

3
推荐指数
1
解决办法
1660
查看次数

标签 统计

css ×2

javascript ×2

css-transforms ×1

css3 ×1

html ×1

jquery ×1

math ×1

perspective ×1