CSS:旋转图像并对齐左上角

Question

我试图使用CSS变换旋转图像,使其在周围保持正确对齐div,即图像的左上角应与图像的左上角对齐div.

正如你在这里看到的那样( - >点击[rotate]),这不起作用.有没有办法来解决这个问题？

(请注意,我将在在线图像查看器中使用它,因此我无法对旋转图像的偏移进行硬编码.有很多类似的问题,但我没有找到这个确切的问题.)

Answer 1

如果你想在CSS中完成它,这就是这样的:

.rot90 {
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */
    transform: translateY(-100%) rotate(90deg); /* W3C */  
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

更新的演示

诀窍是围绕左下角旋转图像.一旦完成,它下降了100%的高度; 翻译它现在没问题.

为反向旋转获得相同的效果:(悬停到变换)

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

<div style="border: 1px solid red;">
  <img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" />
</div>

Answer 2

我不知道是否有更简单的方法，但是您可以像这样设置旋转后图像的边距。

margin:68px -66px;

您可以使用js获取图像的宽度和高度，以便它根据图像的大小设置值。我用的是手动方式。

http://jsfiddle.net/YQktn/3/

编辑：

你总是可以乱搞

-webkit-transform-origin: 75px 75px;
-moz-transform-origin: 75px 75px;
-ms-transform-origin: 75px 75px;
-o-transform-origin: 75px 75px;
transform-origin: 75px 75px;

如此处所示：CSS“transform：rotate（）”通过“position：absolute”影响整体设计（未正确对齐）