SOURCE

<div class="a"></div>
    
    <div class="b"></div>
    
    <div class="c"></div>
    
    <div class="d"></div>
    
    <div class="e"></div>
    
    <div class="f"></div>
    
    <div class="g">
    	<span class="g1"></span>
      <span class="g2"></span>
    </div>

body {
	background:#000;
}

* {
  /* 全部对象过渡方法开启、过程时长、运动曲线 */
  transition:all 0.5s ease-in-out;
  -webkit-transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-o-transition:all 0.5s ease-in-out;
}

div {
  float:left;
	width:50px;
  height:50px;
  background:#fff;
  margin:15px 5px;
  position:relative;
  top:0;
  left:0;
  overflow:hidden;
  font-size:0;
  padding:1px;
  border:4px solid rgba(0,0,0,0.85);
  border-radius:15px;
}

.a {
  /* 变形 1倍 */
	transform:scale(1);
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
}
.a:hover {
/* 变形 1.5倍 */
	transform:scale(1.5);
	-webkit-transform:scale(1.5);
	-moz-transform:scale(1.5);
	-o-transform:scale(1.5);
}

.b {
  /* 旋转 0° */
	transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
}

.b:hover {
  /* 旋转 -180°*/
  transform:rotate(-180deg);
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
}

.c:hover {
	height:5px;
  top:20px;
  margin-bottom:60px;
}

.d:hover {
	width:5px;
  left:20px;
  margin-right:50px;
}

.e:hover {
	transform:scale(0);
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-o-transform:scale(0);
}

.f {
	transform:scale(1) rotate(0deg);
	-webkit-transform:scale(1) rotate(0deg);
	-moz-transform:scale(1) rotate(0deg);
	-o-transform:scale(1) rotate(0deg);
}
.f:hover {
	transform:scale(1.5) rotate(-180deg);
	-webkit-transform:scale(1.5) rotate(-180deg);
	-moz-transform:scale(1.5) rotate(-180deg);
	-o-transform:scale(1.5) rotate(-180deg);
  z-index:2;
}

.g span {
	width:100%;
  height:100%;
  display:block;
  border-radius:10px;
  	background:url("http://www.07073.com/uploads/121127/10393591_105504_1_lit.jpg") no-repeat;
  background-size:100% 100%;
}

.g .g2 {
  height:0;
	background-image:url("http://i2.sinaimg.cn/gm/2012/1126/U7232P115DT20121126135512.jpg");
}

.g:hover .g1 {
  height:0;
  
}
.g:hover .g2 {
  height:100%;
}