title: CSS transform-scale not working properly
body: <p>This is my code</p>
  
  <pre><code>// turn a pie into a nav menu (make it smaller)
  // this is triggered when a pie should be turned into a nav
  function beNavPie(pie) {
      $(pie).css("transform", "scale(0.3)");
      $(pie).css("transform-origin", "initial");
  }
  // turn a nav menu into a pie (revert it to original size)
  // this is triggered when the nav is clicked
  function pieFromNav(nav) {
      $(nav).css("transform", "scale(1)");
      $(nav).css("transform-origin", "initial");
  }
  </code></pre>
  
  <p>As you can see in the gif below, it's working fine.
  But the turn is:
  Every pie's first time to be a nav menu(a small one), the transition
  path curves, after that, it's transition will not already have path curves. here is jsfiddle: <a href="https://jsfiddle.net/q3jytbkr/" rel="nofollow noreferrer">https://jsfiddle.net/q3jytbkr/</a></p>
  
  <p>here is sample</p>
  
  <p><a href="https://i.stack.imgur.com/noFk3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/noFk3.gif" alt="enter image description here"></a></p>
  
  <p>A longer look</p>
  
  <p><a href="https://i.stack.imgur.com/l8mZJ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l8mZJ.gif" alt="enter image description here"></a></p>