我有一个宽度和高度可以变化的图像。我希望能够旋转保留初始顶部和左侧位置的图像。我正在使用transform:rotate(270deg); 问题是图像向左移动。我知道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);">
答案 0 :(得分: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);
}