CSS3旋转图像保留其左上位置

Question

我有宽度和高度可以变化的图像。我希望能够旋转保存初始顶部和左位置的图像。我正在使用变换：旋转（270deg）; 问题是图像移动到左侧。我知道转换原点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);">

.

Answer 1

这是旋转 - 旋转动画

注意：由于更好的可见性，图像的大小已被修改！

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);
}

.