Question

我有一个圆圈，将鼠标悬停在上面时会翻转。 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 -->

我应该怎么解决？

这是一个小提琴： http://jsfiddle.net/cmvz978x/19/

Answer 1

如注释中提到的@Aravind S一样，您不能将容器设置为height: 100%。元素将不再具有定义的大小，因此将为“ 100％无内容”。这就是您的元素消失的原因，因为0的100％就是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复制而来的。通过使用这些断点，可以为不同的视口设置不同的大小。

例如：

/* 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;
    }
}

这将允许您的元素随网页缩放。您也可以根据需要省略断点，页面将选择最适用的断点来定义其样式。

Answer 2

以下是说明：为了使百分比值适用于身高，必须确定父母的身高。更多here

指定百分比高度。百分比是用相对于生成的框的包含块的高度。如果没有明确指定包含块的高度（即取决于内容的高度），并且此元素不是绝对的定位，该值计算为“自动”。高度的百分比根元素相对于初始包含块。

如果您希望宽度和高度动态变化以提高响应速度，则可以使用媒体查询来定位特定的分辨率。

Answer 3

通过对.face-container元素的宽度和高度都使用垂直高度（vh）属性，您可能能够实现所需的效果。（我还添加了min-width和min-height，以确保圆不会变得小于文本。）如果使用此方法，则必须对CSS进行其他调整才能正确对齐容器。

.face-container {
    position: relative;
    min-width: 200px;
    min-height: 200px;
    width: 80vh;
    height: 80vh;
    z-index: 1;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

为什么将宽度和高度设置为100％时元素会消失？

3 个答案: