title: Flip a 3D card with CSS
body: <p>I'm trying to make a <strong>3D card flipping effect with <em>CSS</em></strong> like this.</p>
  
  <p><a href="https://i.stack.imgur.com/jjWby.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jjWby.gif" alt="3D flipping card with CSS"></a></p>
  
  <p>The difference is that I want to use only <em>CSS</em> to implement it.</p>
  
  <p>Here is the code I tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*** LESS: ***/
  
      .card-container {
          position: relative;
          height: 12rem;
          width: 9rem;
          perspective: 30rem;
          .card {
              position: absolute;
              width: 100%;
              height: 100%;            
              div {
                  position: absolute;
                  height: 100%;
                  width: 100%;
              }
              .front {
                  background-color: #66ccff;
              }
              .back {
                  background-color: #dd8800;
                  backface-visibility: hidden;
                  transition: transform 1s;
                  &amp;:hover {
                      transform: rotateY(180deg);
                  }
              }
          }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>HTML:
  &lt;div class="card-container"&gt;
    &lt;div class="card"&gt;
      &lt;div class="front"&gt;&lt;span&gt;Front&lt;/span&gt;&lt;/div&gt;
      &lt;div class="back"&gt;&lt;span&gt;Back&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The issue is that the card doesn't flip, it snaps from back to front like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9HWVx.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9HWVx.gif" alt="Flipping card effect not working"></a></p>
  
  <p>Is it possible to implement this <strong>3d card flip on hover</strong> effect using only <em>CSS</em>?</p>