css3鼠标悬停背景做360°旋转效果

css3鼠标悬停背景做360°旋转效果

鼠标悬停效果如下所示：

鼠标放置在图片上：360度顺时针旋转

鼠标放置在图片上：360度逆时针旋转

html：

<section class="container">
<div class="pic rot-con1"></div>
<div class="pic rot-con2"></div>
</section>

css：

*{
padding: 0;
margin: 0;
}
.container{
width: 600px;
margin: 50px auto;
}
.pic{
width: 220px;
height: 220px;
float: left;
background-repeat: no-repeat;
background-position: left top;
background-size: 220px 220px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.rot-con1{background-image: url('./img/1.jpg');}
.rot-con2{background-image: url('./img/2.jpg');}
.pic:hover{
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}