簡潔的div翻轉案例

時間  2019-11-15
標籤 簡潔 div 翻轉 案例 欄目 CSS 简体版
原文   原文鏈接 
<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程