title: CSS clip-path interfering with nested divs in a 'playing card flip' animation
body: <p>Long story made short I am trying to work on a page that will be showing a playing card that I want to animate flipping over to the back side and back again at certain points. So far I've been using a lot of the code from this useful blog post to do so: <a href="https://manjitkarve.com/posts/card-flip-interaction/" rel="nofollow noreferrer">https://manjitkarve.com/posts/card-flip-interaction/</a></p>
  <p>What I'm trying to add on now is a clip-path as the majority of my card images are not 'clean' and have some jank white lines around the image and using clip-path in CSS seemed like the cleanest way to nail this. And so far isolated on its own it is doing the job swimmingly.</p>
  <p>However with the clip-path added in, my card flip transitions are messed up. As an example: If I am sitting on the 'front' face of the card and ask it to flip to the back, it flips to a mirrored version of the front face instead. Once I take clip-path out, it's back to normal.</p>
  <p>There's a LOT of moving parts to my code now but I'll post what I can/what's relevant. As an addition note, I'm also using the SWUP JS library in here but that functionality is working fine and best I can tell is not interfering with this currently. If I call these card transitions manually outside of SWUP, I get the same behavior:</p>
  <p>HTML:</p>
  <pre><code>    &lt;main id=&quot;swup&quot;&gt;
      &lt;div id=&quot;swup-card-img card_img_overlay&quot; class=&quot;card-left-half card transition-flip center&quot;&gt;
    &lt;div class=&quot;front face&quot; style=&quot;background-image:url('{{ card.card_image.url }}')&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;back face&quot; style=&quot;background-image:url('{% static 'img/fow_cardback.png' %}')&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/main&gt;
  
  </code></pre>
  <p>CSS:</p>
  <pre><code>.transition-flip {
      transition: transform 1.0s;
      transform-style: preserve-3d;
  }
  
  .transition-flip .card .front {
      transform: rotateX(0deg);
  }
  
  .transition-flip .card .back {
      transform: rotateX(180deg);
  }
  
  
  html.is-animating .transition-flip {
          transform: rotateY(180deg);
          transition: transform 1.0s;
  }
  
  html.is-leaving .transition-flip­­ {
      transform: rotateY(180deg);
      transition: transform 1.0s;
  }
  
  .card {
  /* Card height to width ratio is 1.396 rounded */
      width: 50vw;
      height: 69.8vw;
      position: relative;
      perspective: 100vw;
      perspective-origin: 50% 50%;
      transform-style: preserve-3d;
      display: inline-block;
      clip-path: inset(0.3% 0.2% 0.0% 0.2% round 3.9%);
      background: rgba(0, 0, 0, 1.0);
  }
   .card .face {
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98), box-shadow 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98), border-width 0.35s cubic-bezier(0.13, 1.03, 0.39, 0.98);
    box-shadow: 0px 1.2vw 4vw -1vw rgba(0, 0, 0, 0.6);
    background-position: 0 0;
    background-size: 50vw;
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 1.1vw;
  }
   .card .front {
  
  }
   .card .back {
      transform: rotateY(180deg);
      transform: rotateX(180deg);
  
  }
   
  .center {
      margin:0 auto;
  }
  </code></pre>