CSS：旋转图像并对齐左上角 [英] CSS: rotate image and align top left

问题描述

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

I am trying to rotate an image using a CSS transform such that it stays correctly aligned within the surrounding div, i.e. the top left corner of the image should be aligned with the top left corner of the div.

您可以查看这里（ - >点击 [rotate] ）不工作。有没有办法来解决这个问题？

As you can see here (-> click on [rotate]) this does not work. Is there a way to fix this?

（注意，我会在在线图像查看器中使用这个，所以我不能硬编码的旋转图像的偏移量。有很多类似的问题， t发现这个确切的问题。）

(Note that I'd be using this in an online image viewer so I cannot hardcode an offset for the rotated image. There's a lot of similar questions but I haven't found this exact question.)

推荐答案

如果你想要在CSS中完成， >

If you want it to be done in CSS, this is the way:

.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％的高度;

updated demo

The trick is to rotate the image around the left bottom corner. Once done, it is down by 100% of the height; translate it and now it is ok.

要获得相同的逆旋转效果：（hover to transform）

To get the same effect for the inverse rotation: (hover to transform)

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>

这篇关于CSS：旋转图像并对齐左上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！