0

I have a circle that is flipping when you hover over it, On the front it shows "front", And on back it shows "back".

You can see it live here: http://jsfiddle.net/cmvz978x/93 , You will see a circle with grey background and the word "front" at the bottom right side.

That circle is contained with Bootstrap col-xs-4, Which means it should take width: 33.33333333%;.

The div with class face-container is taking width and height of 210px, When I change that to 100%, The circle and the content disappears.

I think that's because of using position: absolute on the content inside the circle.

I want the circle to take the content width and height, Like these 2 examples: http://jsfiddle.net/1ryvajex/6 and http://jsfiddle.net/1ryvajex/7 , The width and height is not set to x px and the "A" letter is still shown.

Here is the CSS code:

.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);
}

Here is the 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 -->
  • That's not answering my question, take a look at these 2 examples, There is no height or width specified there: http://jsfiddle.net/1ryvajex/6/ http://jsfiddle.net/1ryvajex/7/ –  Jul 18 '18 at 20:46
  • The "A" letter is shown, But in the above code that's not happening –  Jul 18 '18 at 20:47

0 Answers0