Perspective Origin and Position: FF VS Chrome and IE

dabblet.css

/* Perspective Origin and Position: FF VS Chrome and IE */

body{
  width:100%;
  margin:1em;
  height:100%;
  background:#ddd;
  text-align:center;
}

#nav{
  width: 100%;
  position:relative;
  margin:0 auto;
  display:block;
  text-align:center;
  background:#ccc;
}

#container{
  width:800px;
  position:relative;
  margin:0 auto;
  display:block;
  text-align:center;
  background:#bbb;
}



  #container li {
    display: inline-block;
    width: auto;
    margin:.5em
  }

    #container li:nth-of-type(3){
      margin-right:10em
    }
    	
    	#container li:nth-of-type(3) a{
    		background:#00c9d0;
    	}

    #container a{
      box-sizing:border-box;
      border: 1px solid #fff;
      padding:.5em;
      display:block;
      border-radius:5px;
      background:grey;
      color:#fff;
      text-decoration:none;
      text-transform:uppercase;
      font-size:1em
    }


  #toggler{
    perspective: 800px;
    perspective-origin: 400px 0;
    position: static !important;
  }

  
  #more{
    width: 800px;
    height: auto;
    display: block;
    position: absolute;
    left: -9999px;
    transform: translateY(0) rotateX(-80deg);
    transform-origin: 50% 0;
    transition: opacity 0.3s ease-out 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, left 0s linear 0.3s;
    background: #ff0072;
    margin: 24px 0 0 -400px;
    padding: 4.5em 0 1.5em;
    opacity: 0;
    color:#fff;
    font-size:2em;
  }

  #toggler:hover #more {
    transform: translateY(0) rotateX(0deg);
	transition-duration: 0.3s, 0.3s, 0s;
	transition-delay: 0.3s, 0.3s, 0;
    opacity: 1;
    left: 50%;
  }

dabblet.html

  <p>Notice which element is used as a center of perspective in FF and which in Chrome and IE.<br/>For a second I was hoping it's going to be the same as with positioning, but that would make my life too easy, wouldn't it…</p>
  
  <nav id="nav">
    <ul id="container">
      <li><a href="#">---</a></li>
      <li><a href="#">---</a></li>
      <li id="toggler">
        <a href="#">Hover Over Me</a>
        <div id="more">YAY, there's moooooore… And it's pink!</div>
      </li>
      <li><a href="#">---</a></li>
      <li><a href="#">---</a></li>
      <li><a href="#">---</a></li>
    </ul>
  </nav>
</body>
</html>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}