html5圆形图片自动旋转,纯CSS3圆形图片鼠标滑过旋转翻盖动画特效

这是一款效果非常炫酷的纯CSS3圆形图片鼠标滑过旋转翻盖特效。该CSS3特效中，当鼠标滑过圆形图片时，图片以顶边的一个定位点为中心向下旋转，显示出下面的圆形说明文本。

使用方法

HTML结构

该特效使用bootstrap网格系统来布局，基本的HTML结构如下：

......

......

CSS样式

该圆形图片鼠标滑过特效的CSS样式非常简单：每一个.box元素是一张圆形图片，它的定位方式采用相对定位。.pic元素是图片的包裹容器，它的定位方式采用相对定位，并通过transform-origin属性将旋转的原点设置在X轴95%，Y轴50%的地方，这个点是圆形旋转的中心点。效果中通过.pic:after为元素将这个点显示在图片上。

.box-bg{

overflow: hidden;

}

.box{

position:relative;

}

.box .pic{

position: relative;

z-index: 1;

transform-origin: 95% 50% 0;

transition: all 0.5s ease 0s;

}

.box .pic:after{

content: "";

position: absolute;

top: 50%;

left:95%;

width: 8px;

height: 8px;

border-radius: 50%;

background: rgba(0, 0, 0, 0.8);

box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);

margin: -4px 0 0 -4px;

}

在鼠标滑过时，.pic元素被旋转了-140度。

.box:hover .pic{

transform:rotate(-140deg);

}

其它的一些CSS代码是制作圆形图片和文本描述信息的代码。

.box .pic img{

width:100%;

height:auto;

border-radius:50%;

}

.box .content{

position: absolute;

top: 0;

width: 100%;

height: 100%;

border-radius: 50%;

padding: 70px 20px;

background: #b9607e;

}

.box .title{

text-align:center;

margin-bottom:5%;

text-transform:uppercase;

}

.box .title a{

color:#fff;

transition: all 0.3s ease 0s;

}

.box .title a:hover{

color:#333;

}

.box .description{

color:#fff;

text-align:center;

text-transform:uppercase;

}