css - 使用 transform translate 规范化 transform rotate 元素的位置

Question

我在最后几年仍然无法找到解决方案，normalize元素位置，在我旋转它们之后。

这是我的例子:https://stackblitz.com/edit/typescript-9n8zaq

关于定位上层<div>与 transform这样每个分辨率下的黄色下切边就正好在两条红线相交的地方。 (改变 View 宽度。)如果黄色元素的切割边缘在任何宽度处都不符合红线碰撞点，则公式错误)

width和 height我已经设置成双倍的值了，不然这样就填不满了height和 width通过旋转。因此，宽度和高度应保持这些值。

唯一改变，应该transform: rotate (-10deg) translate (-25%, calc (-50% - 10%));在类里面.view-area-top

Answer 1

transform: translate(-25%, -50.77%) rotate(-10deg) ;

水平 -25% 使框回到水平中线。垂直 -50.77% 将下边缘定位到红十字上。这个数字是 50.77% = 50%/cos(10°)。

这是另一个将下边缘的中心保持在十字上的变体:

transform: translate(-25%, -50%) translate(0, 50%) rotate(-10deg) translate(0, -50%);

第一个平移将下边缘的中心移动到十字上(没有任何旋转)。接下来的三个变换是围绕下边缘中心的旋转(平移到轴心点、旋转、平移回来)。当然，您可以将前两个翻译结合起来，但这会增加阅读难度。