title: CSS : i don't know how to split this code (for card flip)
body: <p>I tried to split this code from :</p>
  
  <pre><code>.card-container:hover .sides {
    transform: rotateY(180deg);
  }
  </code></pre>
  
  <p>to this :</p>
  
  <pre><code>.card-container:hover {
    transform: rotateY(180deg);
  }
  
  .sides {
    transform: rotateY(180deg);
  }
  </code></pre>
  
  <p>and it doesn't work.</p>
  
  <p>It's for a card flip without clicking on it (and no js)</p>
  
  <p>Here the full code :</p>
  
  <p>HTML :</p>
  
  <pre><code>  &lt;div class="card-container" &gt;
      &lt;div class="sides"&gt;
        &lt;div class="front"&gt; NIKE &lt;/div&gt;
        &lt;div class="back"&gt; TA RACE&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>.card-container {
    margin-top: 2rem;
    margin-right: auto;
    margin-bottom: 2rem;
    margin-left: auto;
    max-width: 320px;
    perspective: 100;
    width: 320px;
    height: 480px;
  }
  
  .card-container:hover .sides {
    transform: rotateY(180deg);
  }
  
  
  .sides {
    position: relative;
    transform-style: preserve-3d;
    transition: .6s;
  }
  .front {
    width: 320px;
    height: 480px;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    z-index: 2;
    background-color: yellow;
    background-size: 100% 100%;
    transform: rotateY(0deg);
  }
  
  .back {
    width: 320px;
    height: 480px;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    background-color: green;
    background-size: 100% 100%;
    transform: rotateY(180deg);
  }
  </code></pre>