<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.media-object {
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 75px;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.media-object:hover {
-webkit-transform:rotate(360deg) skew(-10deg) scale(1.0) translate(100px,0);
-moz-transform:rotate(360deg) skew(-10deg) scale(1.0) translate(100px,0);
transform:rotate(360deg) skew(-10deg) scale(1.0) translate(100px,0);
}
.rotate-icon {
display: inline-block;
vertical-align: middle;
width: 150px;
height: 150px;
background-size: 150px 150px;
background-image: url("../images/animal/rotate.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<span class="media-object rotate-icon"></span>
</div>
</body>
</html>
原文：http://www.cnblogs.com/floraCnblogs/p/pic-hover-rotate.html