使用 CSS 旋转图像并将其放回原位
当我使用 CSS 旋转位于浮动 div 中的大图像时
-moz-transform: rotate(270deg);
（使用 Firefox 3.6.3 显示页面），它会弄乱页面布局：显然，图像的大小是在旋转之前评估的。
此外，图像会发生移位，部分超出屏幕，因为它旋转的点是固定的。我该如何改进这个？ （-moz-transform-origin 在这里没有帮助。）
When I rotate a large image with CSS
-moz-transform: rotate(270deg);
which sits in a floating div (using Firefox 3.6.3 to display the page), it messes up the page layout: Apparently, the size of the image is evaluated before it has been rotated.
Furthermore, the image is displaced, partly being out of the screen, because the point it is rotated about is fixed. How can I improve this? (-moz-transform-origin doesn't help here.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我会设置一个有意义的 moz-transform-origin 点（对于方形图像，50% 50% 可能是一个不错的选择，或者如果您的图像形状不同，则更聪明），并使用 moz-transform:scale(sx[ , sy]) 以确保最终图像适合布局算法最初给您的空间。
I would set a moz-transform-origin point that makes sense (50% 50% might be a good bet for square images, or be more clever if your images vary in shape), and use a moz-transform: scale(sx[, sy]) to ensure that the final image fits in the space originally given to you by the layout algorithm.