純CSS響應式翻轉盒
[英]Pure CSS responsive flipping boxes
問題描述
我想要一些翻轉盒。 鼠標懸停時，圖像翻轉並顯示文本。 此方法有效，但沒有響應（第二行框在上一行的末尾）。 問題是.f_contenedor的高度，但是我希望它能夠響應，所以我使用的是“ padding-top：56％”屬性。
如何確定“ f_contendor”的高度與.face相同？
這里有一個例子http://bregna.org/flip.html
這是代碼段。 是相同的代碼，只是背景不同。
.f_contenedor:hover .f_card { transform: rotateY(180deg); box-shadow: -5px 5px 5px #aaa; } .f_contenedor { position: relative; padding: 10px; width: 50%; height: auto; z-index: 1; float: left; perspective: 1000; box-sizing:border-box;; } .f_card { width: 100%; height: 100%; transform-style: preserve-3d; transition: all .3s linear; } @media (min-width: 768px) { .f_contenedor { width: 50%; } } @media (min-width: 992px) { .f_contenedor { width: 30%; } } .shadow { -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); } .face { background-size: cover; background-repeat: no-repeat; } .face { position: absolute; width: 100%; height: 0; padding-top: 56%; backface-visibility: hidden; } .face.back { display: block; transform: rotateY(180deg); box-sizing: border-box; height: 100%; color: white; text-align: center; background-color: #aaa; } .face.back span { margin-top: -56%; padding: 12px; display: block; }
<!doctype html> <html lang="es_MX"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="icon" type="image/png" href="/favicon.png"/> <title>Flip</title> </head> <body> <div class="f_contenedor"> <div class="f_card" style="background-color: black"> <div class="back face text-center shadow"> <span> <h1>WEB</h1> <p>Accusantium delectus non quae. Aliquam delectus, dolorem ea id, inventore libero molestias numquam, porro quasi quibusdam reiciendis sequi soluta tenetur veniam voluptatem. </p></span> </div> </div> </div> <div class="f_contenedor"> <div class="f_card"> <div class="front face shadow" style="background-color: orange"> </div> <div class="back face text-center shadow"> <span> <h1>CMS</h1> <p>Accusantium delectus non quae. Aliquam delectus, dolorem ea id, inventore libero molestias numquam, porro quasi quibusdam reiciendis sequi. </p></span> </div> </div> </div> <div class="f_contenedor"> <div class="f_card"> <div class="front face shadow" style="background-color : firebrick;"> </div> <div class="back face text-center shadow"> <span> <h1>THE GRID</h1> <p>Accusantium delectus non quae. Aliquam delectus, dolorem ea id, inventore libero molestias numquam. </p></span> </div> </div> </div> <div class="f_contenedor"> <div class="f_card"> <div class="front face shadow" style="background-color: green"> </div> <div class="back face text-center shadow"> <span> <h1>FLOWERS</h1> <p>Ad, aperiam blanditiis dolorem dolorum ea earum ipsam laboriosam molestias non odio provident . </p></span> </div> </div> </div> <div class="f_contenedor"> <div class="f_card"> <div class="front face shadow" style="background-color: yellow"> </div> <div class="back face text-center shadow"> <span> <h1>DRINKS</h1> <p>Accusamus animi earum enim ex impedit nesciunt nihil quod quos vel? Dolores fugit harum modi placeat quasi quam? </p></span> </div> </div> </div> <div class="f_contenedor"> <div class="f_card"> <div class="front face shadow" style="background-color: greenyellow"> </div> <div class="back face text-center shadow"> <span> <h1>MURALS</h1> <p>Aperiam aut consequuntur nostrum rem similique temporibus veritatis. </p></span> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2018-07-11 21:41:11
您可以稍微調整CSS，以使.back面以絕對位置唯一定位，並與父級的頂部對齊。 此外，您可能希望將.face調整為相對定位。
因此，遵循以下原則：
.face {
/* position: absolute; Remove this */
position:relative; /* Position the face relatively by default */
width: 100%;
height: 0;
padding-top: 56%;
backface-visibility: hidden;
}
.face.back {
position:absolute; /* For back faces, these should be positioned with absolute */
top:0; /* Align back faces with the top of the parent */
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
height: 100%;
color: white;
text-align: center;
background-color: #aaa;
}
創建帶有翻頁功能的純 HTML/CSS 書籍
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.