How to tilt inner element forward when tilting outer back with css 3d transforms

Question

I would like to get an effect of an outer element tilting back along the z axis and an inner element standing up out of it in a normal 2d perspective. In other words given this html

<div id="outer">
  <div id="inner"></div>
</div>

I would like the outer element to tilt backwards with its side lines approaching a vanishing point while the inner element's sides are vertical.

How do I achieve this? Using the css

div {
  display: inline-block;
}
#outer {
  padding: 20px;
  background-color: blue;
  -webkit-transform: perspective(400px) rotateX(45deg)
}

#inner {
  height: 150px;
  width: 150px;
  background-color: tomato;
  background-image: url(http://www.w3schools.com/html/smiley.gif);
  background-size: 100%;    
}

I thought I could just do

#inner {
  -webkit-transform: rotateX(-45deg);
}

but that just makes it tilt more. Here is a jsbin

Answer 1

You need to set preserve 3d

#outer {
  padding: 20px;
  background-color: blue;
  -webkit-transform: perspective(400px) rotateX(45deg);
  -webkit-transform-style: preserve-3d;
}

#inner {
  height: 150px;
  width: 150px;
  background-color: tomato;
  background-image: url(http://www.w3schools.com/html/smiley.gif);
  background-size: 100%;   
  -webkit-transform: rotateX(-45deg);
  -webkit-transform-origin: bottom center;
}

jsbin