If you are looking to learn to create a flip card effect using the SCSS syntax then this writeup is here to guide you.

This would be my first story here on Hashnode so please pardon my mistakes and look towards the positive side as you read on how to create a flip card effect using the SCSS syntax.

Here I would be using the Block Element and Modifier (BEM) methodology.

Step 1: Create Block (which in this case is the 'div' tag with the class='container' ) Step 2: Create BlockElement (i.e the 'div' tag with class='containerfront' )

    <main>
      <div class="container">
        <div class="container__front">Front</div>
        <div class="container__back">Back</div>
      </div>
    </main>

Step 3: Style the container element; the defined width and height of the container element would be the defined width and height of the flip card.

.container {
  width: 400px;
  height: 400px;
  position: relative;
  perspective: 1500px;
}

Step 4: Use nesting in SCSS to style the front and back sides of the card, note that at this point both cards would overlap each other and everything might not actually make sense.

&__back,  &__front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;
    color: white;
    transition: all 5s linear;
  }

Step 5: Add different background colors to front and back elements to help differentiate both, rotate the back view by '-180deg'. At the end of the code try remove the -ve sign to view the difference in its rotation.

&__back {
    background: red;
    transform: rotateY(-180deg);
  }
  &__front {
    background: blue;
  }

Finally: Add hover effect to the container element

"<div class='container'>"

telling it to rotate the front element when it is hovered on and then remove the rotation on the back element.

  &:hover &__front {
    transform: rotateY(180deg);
  }

  &:hover &__back {
    transform: rotateY(0deg);
  }

Final SCSS code should look like:

.container {
  width: 400px;
  height: 400px;
  position: relative;
  perspective: 1500px;

&__back,  &__front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;
    color: white;
    transition: all 5s linear;
  }
  &__back {
    background: red;
    transform: rotateY(-180deg);
  }
  &__front {
    background: blue;
  }

  &:hover &__front {
    transform: rotateY(180deg);
  }

  &:hover &__back {
    transform: rotateY(0deg);
  }
}