html图片旋转动画

实现效果：鼠标悬停在图片的一定范围内，红色箭头指向的圆圈会旋转，移出则停止

HTML源代码：

<div class="case-item">
        <div class="ih-item circle effect1">
            <a href="http://www.lanrenzhijia.com">
                <div class="spinner"></div>
                <div class="img"><img src="images/1.png" ></div>
                <div class="info">
                    <div class="info-back">
                        <h3>美国队长</h3>
                        <p>热爱和平</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

CSS样式：

.case-content{overflow:hidden;margin:80px auto 0 auto;width:1200px}
.case-item{
    float:left;
    margin:30px 40px;
    margin-bottom:20px
}
.ih-item{
    position:relative;
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;
    transition:all .35s ease-in-out
}
.ih-item,.ih-item *{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.ih-item a{color:#333}
.ih-item a:hover{text-decoration:none}
.ih-item img{width:100%;height:100%;}
.ih-item.circle,
.ih-item.circle .img{position:relative;width:210px;height:210px;border-radius:50%;}
.ih-item.circle .img:before{position:absolute;display:block;content:'';
    width:100%;height:100%;border-radius:50%;
    box-shadow:inset 0 0 0 16px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.3);
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out
}

transition- property：规定设置过渡效果的CSS 属性的名称 transition-duration：规定完成过渡效果需要多少秒或毫秒。 transition- timing-function：规定速度效果的速度曲线。 transition -delay: 定义过渡效果何时开始。