I flipped when I saw these cards!

Sometimes I just can't help myself when I see something shiny. I want to know all about it and that is no different in my new engineering life. Before I got started with my bootcamp I had some required learning to do before I can officially be admitted to the cohort.

While the required learning was already pretty solid, I couldn't help but start exploring how other sites function. The final piece of the prep work was to build my own site. I kept a few things and snippets I had found over the week that I found cool but most were WELL above my understanding at the time. That's when I stumbled on some awesome detail cards that reminded me of what you would see in a work training. Picture on the front, and on the click, the image flips around to provide detail on whatever the topic was.

I checked out the code and I understood it!...well...for the most part. There were definitely new words but after a little research I could stumble through the definitions on my own and just had to try it out.

I would love to say that it didn't take long but it took HOURS to get the first time. I wanted to make sure I actually understood the why of each line I was writing. The HTML was complicated and lots of layers of divs. Once I got a grasp of their function, I could move on to the text and then the CSS.

Check them out!

<div class="flipCard">
   <div class="flipCardInner">
       <div class="flipCardFront">
           <img id="sloth1" class="slothPics"
                              src="https://www.edgeofexistence.org/wp-content/uploads/2017/06/Bradypus-pygmaeus_2_Bryson-Voirin-1000x667.jpg"
alt="Pygmy Three-toed Sloth haning on a branch"
title="Pygmy three-toed sloth (Bradypus pygmaeus)">

        </div>
        <div class="flipCardBack">
           <h4>Pymy Three-toed Sloth</h4>
           <h5>(Bradypus pygmaeus)</h5>
            <p>
                Classified as critically endangered, pygmy
                three-toed sloths are native exclusively to 
                the island of Escudo de Veragua, off the
                Caribbean coast of Panama. The species is 
                notably smaller than other species of sloths.
            </p>
       </div>
   </div>
</div>

I broke this A LOT. Unintentionally mostly but a couple of times just to know why it needed all of this.

The card looks like one piece but it's three! Four if you count the div that holds it all together.

.flipCard encompasses everything related to that single card. If you were to cut out that space and flip it over within the page, you'd see through the paper to whatever is behind it. The parent div allows you to style that space too.

.flipCardFront is pretty self-explanitory. In my example it only has one child element but that's not a requirement. It will house anything that you'd like visible before any interaction with the card.

.flipCardBack is essentially the same as the front. This will be the parent for anything you'd like to see after the interaction and flip.

.flipCardInner is where the real magic is. The HTML is empty but the CSS is where you will see this important piece. Also notice that it's the parent for both of the previous divs. Imagine the front card and back card are in the center of a piece of paper. This div is what you'll attach your actual transitions to.

Now let's take a look at the CSS behind it.

.flipCard {
  background-color: transparent;  <-----This is that space 
  width: 400px;                        behind the card
  height: 275px;
  perspective: 500px;            <-----This handles the depth
  margin-inline: auto;                 of the card spin. The 
  padding-bottom: 35px;                lower the number, the 
  }                                    more intense that 3D 
                                       moment is. Play around!
.flipCardInner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;     <-----timing of the flip 
  transform-style: preserve-3D; <-----avoids front being both       
  -webkit-column-break-inside: avoid;                    sides
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flipCard:hover .flipCardInner {
  transform: rotateY(180deg);   <-----the actual flip name
}                                     :hover is the event here

.flipCardFront, .flipCardBack {
  position: absolute;
  width: 400px;
  height: 275px;
  -webkit-backface-visibility: hidden;<-keeps you from seeing 
  backface-visibility: hidden;          the backs of the cards
  margin: 0px;
  border-radius: 10px
}

.flipCardFront {
  background-color: #bbb;
  color: black;
}

.flipCardBack {
  background-color: #203f27;
  color: white;
  transform: rotateY(180deg);  <---counterintuitive, but needs 
 }                                 to be separate from the 
                                   above section

This was so fun to build and play with. I've called out the lines that are vital to performance but you should absolutely make every line your own and tinker with everything!

Check out my sample live!
https://rcblake.github.io/my-personal-website/