flip

by gbos

HTML

<div class="flip-card">
  <div class="container">
    <div class="front">
      <img src="https://codahosted.io/docs/IZn3UNbEOU/blobs/bl-137mEqTBzf/8e04b9feef4481efc0616766fb5547e099f3b5a7ecf18c5d6e1b03bbacdb9c9d74ac9f8cc0b5457d5ea1700a7cd5f866942616013c01cff01c2641e5ce293e4f9733859c5858dc1c3f1738355e8591ffd8fca9311e1e2283bb8ea449f5307c52c0dec951" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="back">
      <h1>John Doe</h1>
      <p>Architect &amp; Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

SCSS

body {
  font-family: Arial, Helvetica, sans-serif;
}


@mixin flippable {
  background-color: transparent;

  perspective: 1000px;

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    .front,
    .back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .back {

      transform: rotateY(180deg);
    }
  }

  &.flipped {
    .container {
      transform: rotateY(180deg);
    }
  }

}



.flip-card {
  @include flippable;
  width: 300px;
  height: 300px;

  .container {
    text-align: center;
    .front {
      background-color: #bbb;
      color: black;
    }
    .back {
      background-color: #2980b9;
      color: white;
      height: 340px;
    }
  }
}

JavaScript

var $ = document.querySelector.bind(document), 
        $$ = document.querySelectorAll.bind(document);
        
    Element.prototype.on = Element.prototype.addEventListener;
    NodeList.prototype.forEach = Array.prototype.forEach;
    
    
    $('.flip-card').on('click', () => {
    	$('.flip-card').classList.toggle('flipped');
    });
    
    (async () => {
    const { html, virtual, component, useState } = await import ('https://unpkg.com/haunted/haunted.js');
    
    
    
    
    
    
    })();