css3旋转图像保留其左上位置答案

【问题标题】：css3 rotate image preserving its left top positioncss3旋转图像保留其左上位置
【发布时间】：2014-08-01 05:31:03
【问题描述】：

我有一个宽度和高度可以变化的图像。我希望能够旋转保留初始顶部和左侧位置的图像。我正在使用变换：旋转（270度）；问题是图像向左移动。我知道 transform-origin css 属性可以解决这个问题，但是如何计算这个属性的左上角值呢？也许有一个公式？这是显示图像从初始左侧位置向左移动的示例。 http://jsfiddle.net/h48ca/2/

<img src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg" style="transform: rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform:rotate(270deg);">

【问题讨论】：

标签： image css rotation

【解决方案1】：

这是轮换 - Rotate animation

注意：为了更好的可见性，图片的大小已被修改！

html

<img src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg">

css

img{
    width:40%;
    height:auto;
    position:absolute;
    top:100px;
    left:50px;
    transition:all 2s ease;
}

img:hover {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -ms-transform:rotate(270deg);
}

【讨论】：