本文共 1515 字，大约阅读时间需要 5 分钟。
最终的效果演示：
*{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设计，企业建站，海量精致模板
转载地址：https://blog.csdn.net/weixin_28875613/article/details/117830875 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
