CSS 圆角处理图片和旋转动画
<!DOCTYPE html>
<html>
<head>
<style>
#container:hover{
transform:rotate(360deg);
-moz-transform:rotate(360deg); /* Firefox 4 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-o-transform:rotate(360deg); /* Opera */
}
#container{
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;
-o-transition: 2s;
text-align:center;
border:2px solid #a1a1a1;
background:#dddddd;
width:200px;
height:200px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
overflow:hidden;
padding-left:-10px;
margin-left:50px;
}
#pic{
width:230px;
height:230px;
background-image:url("./pic/mm.jpg");
}
</style>
</head>
<body>
<div id=container ><img id=pic /></div>
</body>
</html>