title: CSS transform-origin not working as expected
body: <p>I'm trying to create a flip effect in CSS which is working but I want the div to flip down so the center point of the animation is the bottom edge.</p>
  
  <p>I thought <code>transform-origin: 0 100%;</code> would created the desired effect for me but it's not quite right.  I've created <a href="https://jsfiddle.net/8hq7zraL/" rel="nofollow noreferrer">this JSFiddle</a> that shows the problem.  Noticed how the bottom edge of the red div lifts up before it's flips down.  Does anyone know how to correct this?</p>
  
  <p>Also here is my HTML and CSS for reference</p>
  
  <pre><code>#f1_container {
    position: relative;
    width: 200px;
    height: 100px;
    z-index: 1;
  }
  #f1_container {
    perspective: 1000;
  }
  .thing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }
  #f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
  }
  #f1_container:hover #f1_card {
    transform: rotateX(180deg);
    transform-origin: 0 100%;
  }
  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background-color: red;
  }
  .face.back {
    display: block;
    transform: rotateX(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa;
  }
  
  &lt;div id="f1_container"&gt;
      &lt;div class="thing"&gt;
          &lt;p&gt;This is some text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="f1_card"&gt;
          &lt;div class="front face"&gt;
          &lt;/div&gt;
          &lt;div class="back face center"&gt;
              &lt;p&gt;This is nice for exposing more information about an image.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>