首页 > 代码库 > css 翻牌 翻转 3d翻转 特效

css 翻牌 翻转 3d翻转 特效

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>翻牌特效</title></head><style>    div{        position: absolute;        transition: 1s;    }    .wai{        width: 300px;        height: 500px;        background-color: red;    }    .wai div{        backface-visibility: hidden;        width: 100%;        height: 100%;    }    .front{        background-color: pink;    }    .back{        background-color: gray;        transform: rotateY(180deg);    }    .wai:hover{        transform: scale(1.1);    }    .wai:hover .back{        transform: rotateY(0deg);    }    .wai:hover .front{        transform: rotateY(180deg);    }</style><body>    <div class="wai">        <div class="front"></div>        <div class="back"></div>    </div></body></html>

 

css 翻牌 翻转 3d翻转 特效