transform动画之rotate与scale的怪异现象

HTML代码：

<strong>hover90顺时针：</strong>
<div><img id="hover-90" src="images/anti360.jpg" class="hover" /></div>
<strong>hover90逆时针：</strong>
<div><img id="hover-90-reverse" src="images/anti360.jpg" class="hover" /></div>
<strong>hover180顺时针：</strong>
<div><img id="hover-180" src="images/anti360.jpg" class="hover" /></div>
<strong>hover180逆时针：</strong>
<div><img id="hover-180-reverse" src="images/anti360.jpg" class="hover" /></div>
<strong>hover270顺时针：</strong>
<div><img id="hover-270" src="images/anti360.jpg" class="hover" /></div>
<strong>hover270逆时针：</strong>
<div><img id="hover-270-reverse" src="images/anti360.jpg" class="hover" /></div>
<strong>hover360顺时针：</strong>
<div><img id="hover-360" src="images/anti360.jpg" class="hover" /></div>
<strong>hover360逆时针：</strong>
<div><img id="hover-360-reverse" src="images/anti360.jpg" class="hover" /></div>
				

CSS代码：

.hover {
	transition: all .3s;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

#hover-90:hover {
	-webkit-transform: rotate(90deg) scale(.5);
	transform: rotate(90deg) scale(.5);
}

#hover-90-reverse:hover {
	-webkit-transform: rotate(-90deg) scale(.5);
	transform: rotate(-90deg) scale(.5);
}

#hover-180:hover {
	-webkit-transform: rotate(180deg) scale(.5);
	transform: rotate(180deg) scale(.5);
}

#hover-180-reverse:hover {
	-webkit-transform: rotate(-180deg) scale(.5);
	transform: rotate(-180deg) scale(.5);
}

#hover-270:hover {
	-webkit-transform: rotate(270deg) scale(.5);
	transform: rotate(270deg) scale(.5);
}

#hover-270-reverse:hover {
	-webkit-transform: rotate(-270deg) scale(.5);
	transform: rotate(-270deg) scale(.5);
}

#hover-360:hover {
	-webkit-transform: rotate(360deg) scale(.5);
	transform: rotate(360deg) scale(.5);
}

#hover-360-reverse:hover {
	-webkit-transform: rotate(-360deg) scale(.5);
	transform: rotate(-360deg) scale(.5);
}
				

JS代码：