最终的效果演示:
<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:rotateY(-180deg); transform:rotateY(-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: rotateY(-180deg); transform: rotateY(-180deg); } .rotatex:hover .dask{ opacity:1; -webkit-transform: rotateY(0); transform: rotateY(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>