編碼的世界 / 優質文選 / 生涯

css3翻轉後顯示背部隱藏的元素的效果3D翻轉效果- transform rotate backface-visibility

2022年3月24日
-   

    最近在做一個項目，需求是鼠標移入一個div元素，此元素進行翻轉，將背部遮擋的div元素顯示出來。
想法是將這兩個div絕對定位，重疊在一起，背部的元素初始化transform: rotateY(180deg)；然後翻轉
這個元素的父元素。這樣就實現了想要的效果。
最終代碼如下：
注意標紅的部分，這個屬性的意思是當元素背部朝向屏幕時隱藏
<!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>test</title>     <style>         *{ margin: 0; padding: 0; box-sizing: border-box; }
    .container, .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">隱藏在背後的元素</div>             <div class="two">初始顯示在前面的元素</div>         </div>     </div> </body> </html>

熱門文章