css - 为什么 margin-top 相对于旋转元素不起作用？

Question

我有一个关于 CSS3 的快速问题。

当您使用 -webkit-transform: rotate(0deg); 旋转元素，并对其应用 margin 时，是否有理由添加元素视觉顶部的边距，而不是元素的实际顶部？

如果不清楚，我写了一个 JSFiddle 来展示它的作用(将边距添加到视觉顶部):http://jsfiddle.net/jakemulley/Tetjq/

谢谢大家!

Answer 1

您认为“顶部”50% 以上的区域是元素的实际顶部，这是不正确的。因为您在 .rotated 上有一个“绝对”位置和 50% 的“顶部”，这成为元素的新“顶部”。添加边距:10px；正在按应有的方式将边距添加到元素的顶部。 “视觉顶部”和“实际顶部”是同一个。

编辑:如果您使用任何前端工具(Firebug 是我选择的工具)，您可以越过该元素来查看它的运行情况。