在HTML中rotate属性,Css3属性RotateX的使用

最终的效果演示：

*{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);

}

环企优站科技

UI设计，企业建站，海量精致模板