title: Animate flip of SVG horizontally, but maintain path/stroke's width or thickness
body: <p>I'm trying to animate a flip of an SVG horizontally using the following:</p>
  
  <pre><code>.animated {
    animation-duration: 2s;
    animation-fill-mode: both;
  }
  
  @keyframes customAnimation {
    0% {
      top: 0;
      right: 3px;
      transform: scaleX(1);
      visibility: visible;
    }
    100% {
      top: 0;
      right: -172px;
      transform: scaleX(-1);
    }
  }
  
  .customAnimation {
    animation-name: customAnimation;
  }
  </code></pre>
  
  <p>Where the element I'm trying to rotate receives both <code>.customAnimation</code> and <code>animated</code> as classes when I want the flip to begin.</p>
  
  <p>The problem is that at the animation's halfway point, the element is essentially a straight line. Ideally, it should maintain some amount of thickness/weight so that it looks more 3D. I've added a snippet to demonstrate: <strong>(if you have issues running the snippet, the corresponding codepen is included below)</strong> [click lock's circle to begin]</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".lock-circle").on("click", function(e){
      var $this = $(".lock-top");
      if($this.hasClass("animated")){
          $this.removeClass("animated");
          $this.removeClass("customAnimation");
      }else{
          $this.addClass("animated customAnimation");
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #333;
  }
  
  .container { 
    width: 300px; 
    min-height: 50%;
    margin: 0 auto;
    background: #FF9B02;
    
    padding: 15px;
    position: relative;
  }
  
  
  svg { 
    display: block;
    position: relative;
  }
  
  .lock-top, .lock-circle { 
    width: 80%; 
    margin: 0 auto;
    
    cursor: pointer;
  }
  
  .lock-top { top: 0; right: 3px }
  .lock-circle { top: -90px; }
  
  /*******************************
   *          Animation
   ****************************/
  
  .animated {
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }
  
  @-webkit-keyframes customAnimation {
    0% {
      top: 0;
      right: 3px;
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
    }
    100% {
      top: 0;
      right: -172px;
      -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
    }
  }
  
  @keyframes customAnimation {
    0% {
      top: 0;
      right: 3px;
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
    }
    100% {
      top: 0;
      right: -172px;
      -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
    }
  }
  
  .customAnimation {
    -webkit-animation-name: customAnimation;
            animation-name: customAnimation;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;section class="container"&gt;
    &lt;svg class="lock-top" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 111 114" style="enable-background:new 0 0 111 114;" xml:space="preserve"&gt;
      &lt;style type="text/css"&gt;
        .st0 {
          fill: #FFFFFF;
        }
      &lt;/style&gt;
      &lt;path class="st0" d="M100,67.7c-0.3-23.8-19.6-43-43.5-43S13.3,43.9,13,67.7h0v13h8V68.2c0-19.6,15.9-35.5,35.5-35.5
        S92,48.6,92,68.2v22.5h8L100,67.7L100,67.7z" /&gt;
    &lt;/svg&gt;
  
    &lt;svg class="lock-circle" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 111 114" style="enable-background:new 0 0 111 114;" xml:space="preserve"&gt;
      &lt;style type="text/css"&gt;
        .st0 {
          fill: #FFFFFF;
        }
      &lt;/style&gt;
      &lt;path class="st0" d="M98.5,25.7v-15h-8v6.2c-9.3-8.2-21.6-13.2-35-13.2c-29.3,0-53,23.7-53,53c0,29.3,23.7,53,53,53s53-23.7,53-53
        C108.5,45.1,104.8,34.4,98.5,25.7z M55.5,97.7c-22.6,0-41-18.4-41-41c0-22.6,18.4-41,41-41c22.6,0,41,18.4,41,41
        C96.5,79.3,78.1,97.7,55.5,97.7z M55.5,20.7c-19.9,0-36,16.1-36,36c0,19.9,16.1,36,36,36c19.9,0,36-16.1,36-36
        C91.5,36.8,75.4,20.7,55.5,20.7 M60,59.6c0,0,2.8,11.5,0.3,14c-1.7,1.7-7.9,1.7-9.6,0c-2.5-2.5,0.3-14,0.3-14
        c-1.9-1.4-3.1-3.5-3.1-6c0-4.2,3.4-7.6,7.6-7.6c4.2,0,7.6,3.4,7.6,7.6C63.1,56.1,61.8,58.3,60,59.6" /&gt;
    &lt;/svg&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/csengineer13/pen/JRdJjX" rel="nofollow">http://codepen.io/csengineer13/pen/JRdJjX</a></p>
  
  <p><strong>Edit:</strong> Suggested solution uses z-index and a series of layers to add depth to the rotating object. It essentially creates two new shapes that provide depth and an edge that are visible as the rotation occurs. The issue is that the solution is for a simple shape; a circle, and does not work for more complex SVG shapes. </p>
  
  <p>Here is the example solution applied to this question:</p>
  
  <p><a href="http://codepen.io/csengineer13/pen/qadQXR" rel="nofollow">http://codepen.io/csengineer13/pen/qadQXR</a></p>
  
  <p>Doesn't resolve/fix; and I am doubtful that it can be modified to work.</p>