最终的效果演示：
<style type="text/css">
*{padding: 0;margin: 0;}
ul,li{list-style-type: none;}
a{text-decoration: none;}
/* 代码开始 */
.transform{
position: absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 99;
}
.rotatex{
position: relative;
width: 300px;
height: 345px;
-webkit-perspective:1700px;
perspective:1700px;
-webkit-perspective-origin:50% 50%;
perspective-origin:50% 50%;
overflow: hidden;
}
.rotatex .rotatex-hiden{
width: 100%;
height: 100%;
position:relative;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.rotatex .img{
width: 100%;
height: 100%;
}
.rotatex .img,
.rotatex .dask{
-webkit-transition:all .5s ease-in-out;
transition:all .5s ease-in-out
}
.rotatex .img{
max-width: 100%;
vertical-align: middle;
backface-visibility:hidden;
}
.rotatex .dask{
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
opacity:0;
background:rgba(1,109,254,1);
text-align:center;
color: #fff;
backface-visibility:hidden;
-webkit-transform:rotateX(-180deg);
transform:rotateX(-180deg);
z-index: 99
}
.rotatex .dask .dask-intro{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.rotatex .href{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100
}
/* 鼠标移入 */
.rotatex:hover .img{
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.rotatex:hover .dask{
opacity:1;
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
</style><div class="transform"> <div class="rotatex"> <div class="rotatex-hiden"> <div class="img"><img src="thumb.jpg"></div> <div class="dask"> <div class="dask-intro"> <h3>环企优站科技</h3> <p>UI设计，企业建站，海量精致模板</p> </div> </div> </div> <a href="" class="href"></a> </div> </div>
