Help! Need help with backface-visibility not working


#1



https://www.codecademy.com/en/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/multiple-arguments?action=resume


Maybe I'm not understanding what this is supposed to look like at this stage. My understanding is that when you look at the card in the browser you should see the Titanosaur title and nothing else. Then when you hover over the card, the Titanosaur title should disappear and the description of the dinosaur should appear.

The way it is now, when I look at the card in the browser there is a Titanosaur title AND the description both going left to right. When I hover over the card I see a backwards Titanosaur title and a backwards description going from right to left. This isn't how it's supposed to look, is it?

I also had to change the width and height of the .front and .back to match the notecard width and height because it was originally too wide to fit the card. Did anyone else have to do this?

Would appreciate some help....


@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}

@mixin transform($transformation) {
  transform: $transformation;
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;  
}

@mixin photo-content {
  object-fit: cover;
}

//Add your own mixins here
@mixin backface-visibility($visibility: hidden) {
   backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

.notecard {
  width: 300px;
  height: 180px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  font-family: Roboto, sans-serif;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
  
  &:hover{
  	@include transform (rotatey(-180deg));  
	}	
  
  .front, .back {
      position: absolute;
   @include backface-visibility;
  // Backface properties
}
    
  .front {
     width: 300px;
  height: 180px;
  
  font-size: 20px;

    .word {
      display: block;
      text-align: center;
      position: relative;
      top: 40%;
    }    
  }
  
  
  .back {
     width: 300px;
  height: 180px;
 
  word-wrap: break-word;
  line-height: 1.6;
    
    .definition {
      width: 100%;
      height: 100%;
            
      .photo {
        width: 60%;
        margin: 0px auto;
          
      }
    }
  }
}


#2

I think you will use this string of code:

@include backface-visibility();

not this

@include backface-visibility;

#3

Thanks for your reply! Appreciate it. I tried your suggestion but it stayed the same. All of a sudden an option box came up to get the code so I clicked that and it said it had retrieved the code, but it still stayed the same. Maybe that's how it is supposed to be, but doesn't look right to me.

Thanks!


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.