zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    3.04
    3.03
    3.02
    3.01
    2.27
    2.25小账本6
    2.24小账本5
    2.23小账本4
    2.22小账本3
    git常用命令
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/6789055.html
Copyright © 2011-2022 走看看