CSS 变换原点和图像对齐

Question

您好，当我使用 Rotate 和 Transform-Origin 将鼠标悬停在 div 上时，我正在尝试旋转图像。当图像在 div 中居中时有效，但是当我更改图像的垂直位置并对 Transform-origin 值进行相关更改时，图像仍会旋转但稍微偏离中心。任何想法将不胜感激。

jsfiddle here（似乎只在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);
 }