title: CSS3 matrix3d rectangle to trapezoid transformation
body: <p>I am trying to use webkit's support for CSS3 <code>transform: matrix3d(&lt;matrix&gt;)</code> to create a 'falling card' effect.  (The only target for the output of this is Chrome)</p>
  
  <p>The end effect should transition through the 4 stages below and end up as just a horizontal line:</p>
  
  <p><img src="https://i.stack.imgur.com/7OTwN.png" alt="enter image description here"></p>
  
  <p>Here is the CSS I have now:</p>
  
  <pre><code>#test { 
              margin: auto auto;
              height: 200px;
              width: 200px;
              border:1px solid black;
              background-color: lightblue;
              -webkit-perspective: 1000; 
              -webkit-transform-origin: 50% 100%;
              -webkit-transform-style: preserve-3d;
              -webkit-animation-name: flip-card;        
              -webkit-animation-duration: 1s;        
              -webkit-animation-iteration-count: infinite;        
              -webkit-animation-timing-function: linear;
              -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
          }
           @-webkit-keyframes flip-card {
              0%    {-webkit-transform: ;}
              100%    {-webkit-transform:
                          matrix3d(1, 0, 0, 0,
                                   0, 1, 0, 0, 
                                   0, 0, 0, 0, 
                                   0, 0, 0.001, 1);}
          }    
  </code></pre>
  
  <p>And the HTML is simple for testing:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div id="test"&gt;this div should fall forward...&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The matrix3d in the above was based on reading <a href="https://stackoverflow.com/questions/2484071/how-do-i-compete-the-transformation-matrix-needed-to-transform-a-rectangle-into-a">this SO question</a>, but it produces a shrinking square that flips around the x-axis defined by the bottom of the initial box.</p>
  
  <p>I understand that CSS 2d matrix can only produce rectangles and parallelograms by transformation of a box and that irregular shapes need the matrix3d transform operation (<a href="http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/" rel="nofollow noreferrer">this</a> was helpful in refreshing my fading linear algebra!), but I seem to only be able to produce rectangles and parallelograms.</p>
  
  <p>I've looked around at some of the SO questions tagged with <code>matrix</code> and <code>transformation</code>.  Most of them are not CSS based and I have not been able to get the transformation I want.</p>