0

I have a circle that flips on hovering over it. The face-container width and height are 210px.

I want the width and height to be dynamic for responsiveness, So I set both to 100%, But then the element disappears.

I think that's because of the content.

.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 -->

What should I do to solve this?

Here is a fiddle: http://jsfiddle.net/cmvz978x/19/

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • Using a percentage based height relies on an explicit height value being set on the parent element:since face container is the parent, you cant set 100% – Aravind S Jul 18 '18 at 15:57
  • When you say it should be responsive, and by that set 100% width/height, 100% based of what? ... browser, or image, or.... – Asons Jul 18 '18 at 17:04
  • And btw, dynamic width using percent works just fine, it is the `height: 100%` that doesn't, and as soon as you set it to 100%, all its ancestors, all the way up to the `html/body`, also need a height set, unless one of them have a defined height using a unit other than percent. – Asons Jul 18 '18 at 17:17
  • @LGSon, I'm using Bootstrap, And that element takes 4 columns, So I want it to take that width –  Jul 18 '18 at 17:37
  • Well, `width: 100%` is not an issue it will take its parents width, the `height: 100%` is, which I explained in my comment, and explained in the dupe links. And that counts whether you use Bootstrap or not. If you use Bootstrap 4, take a look at the 2nd dupe link, it talks about Flexbox, which Bootstrap 4 is based on. – Asons Jul 18 '18 at 17:44
  • Could you please take a look at these two simple examples http://jsfiddle.net/1ryvajex/6/ and http://jsfiddle.net/1ryvajex/7/ ? –  Jul 18 '18 at 17:50
  • There is no specific width or height there, Just the letter "A", Why that's not happening to the word "front"? –  Jul 18 '18 at 17:50
  • The difference between those fiddle's and yours, is that your `.face1` element is absolute positioned and have overflow hidden, and therefore collapse, which the other have not, and their height kept by the text `A`. If you remove `overflow: hidden` (and have `height: 100%` on `face-container`) you'll see the text `front` ... shown here with a dotted red border, collapsed completely: http://jsfiddle.net/cmvz978x/61/ – Asons Jul 18 '18 at 18:12
  • But when I hover over it, It's flipping itself as a mirror –  Jul 18 '18 at 18:15
  • Well, I wasn't trying to solve it, did that already with a comment and links, I tried to explain why `A` works in those 2 fiddles, but `front` didn't in yours. – Asons Jul 18 '18 at 18:18

3 Answers3

1

As @Aravind S mentioned in the comments, you cannot set the container to be height: 100%. The element will no longer have a size defined and will therefore be '100% of nothing'. This is why your element disappears, as 100% of 0 is just 0.

One suggestion I have if you would like to make this element responsive is to implement CSS breakpoints. They look like:

/* 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) {...}

This snippet is copied from W3. By using these breakpoints, you can set different sizes for different viewports.

For example:

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

This would allow your element to scale with the webpage. You can also omit breakpoints as needed, the page will pick the most applicable breakpoint to define its style.

eqwert
  • 507
  • 6
  • 15
  • Then why that's not happening here: http://jsfiddle.net/1ryvajex/3 ? –  Jul 18 '18 at 16:39
0

Here goes the explanation : In order for a percentage value to work for height, the parent's height must be determined. more here

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

if you want the width and height to be dynamic for responsiveness, you can use the media query to target specific resolutions.

Aravind S
  • 2,347
  • 2
  • 12
  • 21
  • Then why that's not happening here: http://jsfiddle.net/1ryvajex/3 ? –  Jul 18 '18 at 16:39
  • @Dan what is not working there? if you set `100%` height to an element, its parent should have a static height or width. and keep one thing in mind `span` which you use is a inline element. – Aravind S Jul 18 '18 at 16:50
  • The `span` is block now http://jsfiddle.net/1ryvajex/7 and it takes the whole parent width which is about 8 columns –  Jul 18 '18 at 16:55
  • its taking the height of letter `A`..you have to set the required height at the parent.if you want `100%` to `.face-container` then, set `210px` to the parent of `.face-container` which is `.card-container` or what ever you like. – Aravind S Jul 18 '18 at 16:59
  • I want it to fit the content like it does in the mentioned examples, Not a specific pixel values –  Jul 18 '18 at 17:03
  • so what is the content height and width? and in btw you used postion absolute and relative also. so i guess you have to use a static height until and unless your content have your required height – Aravind S Jul 18 '18 at 17:06
  • What static width and height did the "A" letter have? –  Jul 18 '18 at 17:40
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176271/discussion-between-aravind-s-and-dan). – Aravind S Jul 18 '18 at 17:41
0

You might be able to achieve the effect you want by using the vertical height (vh) property for both the width and the height of your .face-container element. (I also included min-width and min-height to assure that the circle doesn't become smaller than the text.) If you use this method, you will have to make other adjustments to your CSS to align the container properly.

.face-container {
    position: relative;
    min-width: 200px;
    min-height: 200px;
    width: 80vh;
    height: 80vh;
    z-index: 1;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
Paul Brady
  • 115
  • 6
  • I want to use percentage values, Like here http://jsfiddle.net/1ryvajex/7/ or here http://jsfiddle.net/1ryvajex/6/ –  Jul 18 '18 at 16:56