Css3属性RotateX的使用

2500

最终的效果演示:

<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>