title: Can I use cubic-bezier() timing to make a 3D transform bounce
body: <p>I'm trying to create a submenu animation to have it drop in from behind it's parent menu like it's on a hinge. I want it to go a little past its final resting position, then come back. From my understanding of the <code>cubic-bezier()</code> functional notation, this should be possible. I'm not sure if it's a bug or just me misunderstanding but I can't seem to get it to work. I removed all of the vendor prefixes (they are in the demo) but here's the code I'm using:</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;ul class="nav"&gt;
      &lt;li&gt;
          &lt;a href="index.html"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="about.html"&gt;About&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="about.html#company"&gt;Company&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="about.html#team"&gt;Team&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
       &lt;a href="contact.html"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>ul {
      background-color:#99f;
      border-radius:10px;
      list-style:none;
      margin:0;
      padding:0;
  }
  
  ul:after {
      clear:both;
      content:'';
      display:block;
      height:0;
      margin:0;
      padding:0;
      width:100%;
  }
  
  .nav &gt; li {
      display:block;
      float:left;
      perspective:600px;
      perspective-origin:100% 100%;
      transition:background-color .2s .4s;
  }
  
  .nav li a {
      color:#fff;
      display:block;
      padding:20px;
      text-decoration:none;
  }
  
  .nav li ul {
      background-color:#bbf;
      border-radius:0 0 10px 10px;
      position:absolute;
      transform:rotateX(-90deg);
      transform-origin:0 0 0;
      transition:transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .nav li:hover {
      background-color:#bbf;
      -webkit-transition-delay:0;
  }
  
  .nav li:hover ul {
      transform:rotateX(0);
      transition-delay:.2s;
  }
  
  .nav li li {
      white-space:nowrap;
  }
  </code></pre>
  
  <p><a href="http://jsbin.com/ajasax/9/edit" rel="nofollow">Live Demo</a></p>
  
  <p>So based on the information from <a href="https://developer.mozilla.org/en-US/docs/CSS/timing-function#The_cubic-bezier%28%29_class_of_timing-functions" rel="nofollow">this MDN article</a>, <code>cubic-bezier()</code> <em>can</em> have values greater than 1 on the Y axis, allowing for a bounce effect. In theory, this means the <code>cubic-bezier()</code> I'm using should make the submenu swing from -90deg, down to about 15deg, then back to 0deg. </p>
  
  <p>Unfortunately, I'm not seeing that behavior. I do see that the <code>cubic-bezier()</code> affects the timing of the animation versus using no timing function at all, but it does not provide the bounce effect I expect.</p>
  
  <p>I'm betting it has something to do with going from -90deg to 0deg and past but I'm super lost at this point. I've been unable so far to find any documentation on using <code>cubic-bezier()</code> curves with the <code>rotateX()</code> function to generate this type of effect or even documentation stating whether or not <code>rotateX()</code> supports this kind of rotation or what in the world is going on... help?</p>