问题描述
我试图使用 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:旋转图像并对齐左上角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!