CSS 변환 - 원점 및 이미지 정렬

Question

안녕하세요 회전 및 변형 원점을 사용하여 div 위로 마우스를 가져 가면 이미지를 회전하려고합니다. 그것은 이미지가 div에 집중 될 때 작동했지만 이미지의 수직 위치를 변경하고 변형 원점 값과 관련된 변경 사항을 만들 때 이미지는 여전히 회전하지만 약간 벗어났습니다. 어떤 아이디어라도 감사 할 것입니다. 여기

jsfiddle은

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

이 또한 단지 파이어 폭스에서 작동하는 것 같다 (단지 파이어 폭스에서 작동하는 것 같다)!

건배

Answer 1

노력이

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