css - 使用 CSS 旋转图像并将它们放回原位

Question

当我使用 CSS 旋转大图像时

    -moz-transform: rotate(270deg);

它位于一个 float 的 div 中(使用 Firefox 3.6.3 显示页面)，它打乱了页面布局:显然，图像的大小在旋转之前就已经计算过了。

此外，图像会移位，部分会超出屏幕，因为它旋转的点是固定的。我该如何改进呢？ (-moz-transform-origin 在这里没有帮助。)

Answer 1

我会设置一个有意义的 moz-transform-origin 点(50% 50% 可能是方形图像的一个不错的选择，或者如果您的图像形状不同则更聪明)，并使用 moz-transform: scale (sx[, sy]) 以确保最终图像适合布局算法最初给你的空间。