<分区>
<分区>
我有一个圆圈，悬停在它上面时会翻转。 face-container width 和 height 是 210px。
我希望宽度和高度动态响应，所以我将两者都设置为 100%，但随后元素消失了。
我认为这是因为内容。
.section {
position: relative;
padding: 80px 0;
}
.card-container {
position: relative;
margin: 0 auto;
}
.card-container:after {
clear: both;
}
.item-circled {
background-color: transparent;
text-align: center;
position: relative;
width: 100%;
display: inline-block;
}
.face-container {
position: relative;
width: 210px;
height: 210px;
z-index: 1;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.face-card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.face-container:hover .face-card {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-border-radius: 50%;
border-radius: 50%;
}
.face-1 {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
overflow: hidden;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.face-1.back {
display: block;
box-sizing: border-box;
color: white;
font-size: 13px;
text-align: center;
background-color: #aaa;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-border-radius: 50%;
border-radius: 50%;
}
.centered{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}<div class="container-fluid">
<div class="section">
<section class="card-container">
<div class="row center-block">
<div class="col-xs-push-2 col-xs-8 text-center">
<div class="item-circled col-xs-4">
<div class="face-container">
<div class="face-card">
<div class="face-1">
<div class="text-center" style="background-color: #f7eebe;font-size: 300%;width: 100%;height: 100%">
<span class="centered">front</span>
</div>
</div>
<div class="face-1 back">
<p class="centered">back</p>
</div>
</div> <!-- face-card -->
</div> <!-- face-container -->
</div> <!-- col-xs-4 -->
</div> <!-- col-xs-8 -->
</div> <!-- row -->
</section> <!-- card-conteiner -->
</div> <!-- section -->
</div> <!-- container-fluid -->我应该怎么做才能解决这个问题？
这是一个 fiddle : http://jsfiddle.net/cmvz978x/19/
最佳答案
正如@Aravind S 在评论中提到的，您不能将容器设置为height: 100%。该元素将不再定义大小，因此将是“100% 无”。这就是您的元素消失的原因，因为 100% 的 0 就是 0。
如果您想使此元素响应，我有一个建议是实现 CSS 断点。它们看起来像:
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
此片段复制自 W3 . 通过使用这些断点，您可以为不同的视口(viewport)设置不同的尺寸。
例如:
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.face-container {
width: 210px;
height: 210px;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.face-container {
width: 310px;
height: 310px;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.face-container {
width: 410px;
height: 410px;
}
}
这将允许您的元素随网页缩放。您也可以根据需要省略断点，页面将选择最适用的断点来定义其样式。
关于html - 为什么设置宽高为100%后元素消失了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51406321/