title: Creating a CSS3 3D rotation that swings in like a door
body: <p>I'm trying to use CSS 3D animations to swing in some elements like a door. </p>
  
  <p>I want to achieve an effect like how the 9 tiles swing in on this site: <a href="http://www.ge.com/thegestore" rel="nofollow">http://www.ge.com/thegestore</a></p>
  
  <p>Right now I can get a rotation effect using the TweenMax library, but it's not quite right. My element is rotating in over the top instead from the inside.</p>
  
  <p>Anyone know how to achieve the swing in from the inside effect, using TweenMax or just regular CSS?</p>
  
  <p>See code: <a href="https://jsfiddle.net/0a0osq6a/3/" rel="nofollow">https://jsfiddle.net/0a0osq6a/3/</a></p>
  
  <pre><code>TweenMax.set('#flip-me',{
    rotationX: 180,
    transformOrigin: "top center"
  });
  
  var tl = new TimelineMax({repeat:0, repeatDelay: 0});
  
  tl.add (TweenMax.to("#flip-me", .8, {
    css: {
      rotationX: 0,
      transformOrigin: "top center"
    },
    ease: Cubic.easeInOut
  }));
  tl.play();
  </code></pre>