简洁的div翻转案例

时间：2023-03-09 09:48:25
简洁的div翻转案例 
<!DOCTYPE html>

<html >

<head>

    <title>test</title>

    <meta http-equiv="content-type" content="text/html" charset="utf-8">

    <meta name="author" content="xuyunfei">

    <meta name="description" content="随便做做测试">

    <meta name="keywords" content="test,html">

    <title>随便做做</title>

    <style>

        *{ margin: 0; padding: 0; box-sizing: border-box; }

        .container, .one, .two{ width: 100px; height: 100px; }

        .container{ position: relative; transition: 1s; transform-style: preserve-3d; }

        .container:hover { transform: rotateY(180deg); }

        .one{ position: absolute; top: 0; background: red; transform: rotateY(180deg);backface-visibility: hidden;}/*两个元素的位置一致,把背面隐藏起来,背面的元素翻转过来*/

        .two{ position: absolute; top: 0; background: yellow;backface-visibility: hidden;}

    </style>

</head>

<body>

    <div class="par">

        <div class="container">

            <div class="one hide">隐藏在背后的元素</div>

            <div class="two show">初始显示在前面的元素</div>

        </div>

    </div>

    <script type="text/javascript">

    </script>

</body>

</html>

相关文章