Flip Card

flip-card.markdown

Flip Card

A Pen by guilherme daniel on CodePen.

License.

index.html

<div class="container">
  <div class="card-container">
    <div class="card">
      <div class="front inner">
        <h1>Lorem</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In fuga suscipit eligendi voluptatum fugiat! Pariatur molestiae ullam, esse voluptatibus hic quod earum, aspernatur ipsa magni nostrum, odit reprehenderit neque excepturi.</p>
      </div>
      <div class="back inner">
        <h1>Lorem</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In fuga suscipit eligendi voluptatum fugiat! Pariatur molestiae ullam, esse voluptatibus hic quod earum, aspernatur ipsa magni nostrum, odit reprehenderit neque excepturi.</p>
        <button>GO</button>
      </div>
    </div>
  </div>
</div>

style.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container {
  width: 200px;
  height: 400px;
  margin-top: 20px;
  background-color: transparent;
  perspective: 1000px;
}

.card-container:hover .card {
  transform: rotatey(180deg);
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: 0.5s;
  transform-style: preserve-3d;
  box-shadow: 0px 0px 15px 5px gray;
}

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

.front {
  background-color: red;
}

.back {
  background-color: blue;
  transform: rotateY(180deg);
}

/*  */
.inner {
  padding: 1em;
  text-align: center;
  h1 {
    margin-bottom: 0.6em;
  }

  button {
    margin-top: 1em;
    padding: 0.4em 1em;
    border: none;
    background-color: fuchsia;
    border-radius: 0.5em;
  }
}