0
嗨我想旋转图像时,我将鼠标悬停在使用旋转和变换 - 原产地。当图像以div为中心时,它是有效的,但是当我改变图像的垂直位置并且对变换原始值进行相关改变时,图像仍然旋转,但是稍微偏离中心。任何想法,将不胜感激。这里CSS转换 - 原点和图像对齐
的jsfiddle(似乎只在Firefox工作)
http://jsfiddle.net/boyle/U3yLk/
HTML
<div class="box">
<div class="c">
<img class="pic" src="p.png"/>
</div>
CSS
.box{
width: 200px;
height: 300px;
background-color: #4781AA;
display:block;
}
.c{
width:200px;
height:300px;
display:block;
transition: all 1s ease;
}
.c:hover{
transform: rotate(180deg);
transform-origin: 100px 150px;
}
.pic {
position: relative;
left:50px;
top: 100px;
}
这也似乎只在Firefox工作!
干杯
'transform'仍需要在Chrome AFAIK –
@Paulie_D前缀是它。 webkit友好版本:http://jsfiddle.net/U3yLk/5/ –