work转换html,翻转换图.html · 张斯佗罗夫柯基/personal work notes - Gitee.com
#box{
width: 440px;
height: 824px;
margin: 200px auto;
border: 2px solid black;
perspective: 1000;
position: relative;
overflow: hidden;
}
img{
display: block;
position: absolute;
backface-visibility: hidden;
top: 0;
left: 0;
}
.font{
z-index: 10;
}
.back{
z-index: 5;
transform: rotateY(180deg);
}
.rever{
transition: all 1s;
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
#box:hover .rever{
transform: rotateY(180deg);
}
span{
position: absolute;
display: block;
width: 0;
height: 0;
background-color: red;
transition: all 1s;
}
.heng{
left: 0px;
height: 2px;
}
.heng-t{
top: 5px;
}
.heng-b{
bottom: 5px;
}
.shu{
top: 0px;
width: 2px;
}
.shu-l{
left: 5px;
}
.shu-r{
right: 5px;
}
#box:hover .heng{
width: 450px;
}
#box:hover .shu{
height: 834px;
}
.shadow{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
z-index: 20;
transform: translateY(100%);
transition: all .7s;
color: white;
font-size: 40px;
text-align: center;
}
.shadow p{
height: 170px;
position: absolute;
top: 50%;
margin-top: -85px;
}
#box:hover .shadow{
transform: translateY(0);
}
終于成功了！這個demo涵蓋：1邊線動態生成；2翻轉換圖；3遮蓋層淡入
一鍵復制
編輯
Web IDE
原始數據
按行查看
歷史
總結
以上是生活随笔為你收集整理的work转换html,翻转换图.html · 张斯佗罗夫柯基/personal work notes - Gitee.com的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dm9000 晶振测不准
- 下一篇： NOD 32 企业版远程管理服务器病毒库