反轉換圖

#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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。