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。