纯CSS响应式翻转盒
[英]Pure CSS responsive flipping boxes
问题描述
I want to have some flipping boxes. 
我想要一些翻转盒。 On mouse over, the image flips and shows the text. 鼠标悬停时，图像翻转并显示文本。 This works, but its not responsive (the 2nd row boxes ends over the previous row). 此方法有效，但没有响应（第二行框在上一行的末尾）。 The problem is .f_contenedor height, but I want this to be responsive, so I'm using the "padding-top: 56%" property. 问题是.f_contenedor的高度，但是我希望它能够响应，所以我使用的是“ padding-top：56％”属性。
How can I make sure "f_contendor" height is the same as .face? 如何确定“ f_contendor”的高度与.face相同？
There is an example here http://bregna.org/flip.html 这里有一个例子http://bregna.org/flip.html
and this is the snippet. 这是代码段。 Is the same code, just the backgrounds are different. 是相同的代码，只是背景不同。
.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
You could slightly adjust your CSS so that the .back face is exclusively positioned with absolute, and aligned to the top of the parent. 您可以稍微调整CSS，以使.back面以绝对位置唯一定位，并与父级的顶部对齐。 Additionally, you would want to adjust the .face to be relatively positioned. 此外，您可能希望将.face调整为相对定位。
So something along these lines: 因此，遵循以下原则：
.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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.