Question

当您将鼠标悬停在上面时，我有一个正在翻转的圆圈，在前面显示为“前”，在后面显示为“后”。

您可以在此处看到它的实况：http://jsfiddle.net/cmvz978x/93，您将在灰色的背景中看到一个圆圈，并在右下角看到单词“ front”。

该圈子包含在Bootstrap col-xs-4中，这意味着它应该用width: 33.33333333%;。

类别为face-container的div的宽度和高度为210px，当我将其更改为100％时，圆圈和内容消失了。

我认为是因为在圈子内的内容上使用了position: absolute。

我希望圆采用内容的宽度和高度，就像下面的两个示例：http://jsfiddle.net/1ryvajex/6和http://jsfiddle.net/1ryvajex/7一样，宽度和高度未设置为x px，并且“ A”字母仍然显示。

这是CSS代码：

.item-circled {
    position: relative;
    text-align: center;
    font-size: 300%;
}

.face-container {
    position: relative;
    z-index: 1;
    perspective: 1000px;
    width: 210px;   /* Fixed width */
    height: 210px; /* Fixed height */
}

.face-card {
    transform-style: preserve-3d;
    transition: all .5s linear;
    width:100%;
    height: 100%
}

.face-container:hover .face-card { /* to rotate on hovering over the circle */
    transform: rotateY(180deg);
    border-radius: 50%;
}

.face-1 {  /* For both back and end elements. */
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    overflow: hidden;
    border-radius: 50%;
}

.face-1.front{ /* style the front element */
  background-color: #eee;
  height: 100%
}

.face-1.back { /* style the back element */
    background-color: #aaa;
    transform: rotateY(180deg);
}

这是HTML：

<div class="container-fluid"> <!-- Bootstrap container -->
            <div class="row center-block">  
                <!-- Leave 2 columns to the left and the right and center the content within 8 columns. -->
                <div class="col-xs-push-2 col-xs-8 text-center">    
                    <!-- 33.33333% of the 8 columns. -->
                    <div class="item-circled col-xs-4">
                        <!-- The Element with 210px height and width. -->
                        <div class="face-container">
                            <div class="face-card">
                                <!-- Front Element. -->
                                <div class="face-1 front">
                                    <span>front</span>
                                </div>
                                <!-- Back Element. -->
                                <div class="face-1 back">
                                    <p>back</p>
                                </div>
                            </div> <!-- face-card -->
                        </div> <!-- face-container -->
                    </div> <!-- col-xs-4 -->
                </div> <!-- col-xs-8 -->
            </div> <!-- row -->
</div> <!-- container-fluid -->

将宽度和高度设置为百分比值后，为什么不再显示该圆？

0 个答案: