CSS：使用 - * - 变换：旋转。对齐问题

Question

对于我的HTML picture viewer，我试图通过CSS -*-transform: rotate（90度）自动旋转一些图片。由于宽度大于图片的高度，因此img元素太小，旋转的图片覆盖了上下文中的一些文本。

要修复/解决此问题，我创建了一个带有预期大小的div。这导致了另一个问题，即图像现在也放错了位置。为了修复/解决这个问题，我在它周围创建了第二个div，它修复了不好的位置。

一个例子（在线：here）：

• 的图像具有尺寸W = 1024，H = 768。
• 我旋转了90度。
• 外div：<div style="display:block; width:768px; height:1024px;">
• 内div：<div style="position:relative; left:-128px; top:128px; display:block;">

这导致正确/预期/希望定位和对准。

我不知道，如果有更优雅/更清洁的方式来做到这一点。

Answer 1

尝试删除两者的div和保证金设置为您IMG：

margin:128px -128px; 

它应该工作，这是一个有点清洁。

Ps：128是（1024-768）/ 2。