CSS轉換 - 原點和圖像對齊

Question

嗨我想旋轉圖像時，我將鼠標懸停在使用旋轉和變換 - 原產地。當圖像以div爲中心時，它是有效的，但是當我改變圖像的垂直位置並且對變換原始值進行相關改變時，圖像仍然旋轉，但是稍微偏離中心。任何想法，將不勝感激。這裏

的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工作！

乾杯

Answer 1

試試這個

.transform{ 
transform:rotate(60deg); 
-ms-transform:rotate(60deg); 
-moz-transform:rotate(60deg); 
-webkit-transform:rotate(60deg); 
-o-transform:rotate(60deg); 
}