CSS变换旋转并平移位置错误

Question

我可能会遗漏一些东西，但这个CSS代码：

width: 150px;
height: 200px;
position: absolute;
top: 20px;
left: 40px;

...应该产生与此相同的结果：

width: 200px;
height: 150px;
transform: 
  translate(20px, 40px)
  rotate(90deg);

在我的机器（镀铬窗口）中，它们不会出现在同一位置。 查看DEMO

Answer 1

我认为问题在于你的转换翻译。

您将变换原点设置为50％50％，.rotated的中心 因此，我将使用每个盒子的中心作为其起源。

.target的起源是115px X 120px：

X1: (150px width / 2) + 40px left = 115px
Y1: (200px height / 2) + 20px top = 120px

.rotated的原始原点（变换前）为100px x 75px：

X2: (200px width / 2) + 0px left = 100px
Y2: (150px height / 2) + 0px top = 75px

要对齐这两个来源，您需要将.rotated移动15px X和45px Y：

ΔX: X1 - X2 = 115px - 100px = 15px
ΔY: Y1 - Y2 = 120px - 75px = 45px

因此，要对齐这两个框，您的转换定义将是：

transform: 
    translate(15px, 45px)
    rotate(90deg);

这是working example 我添加了一个＆＃34;悬停＆＃34;动画来说明变换。