如何在使用css 3d变换向后倾斜外部元素时向前倾斜内部元素

我想得到一个效果，一个外部元素沿着z轴向后倾斜，一个内部元素在一个正常的2d透视图中从中站出来。换句话说，给定这个html

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

我以为我能做到

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

但这只会使它更加倾斜。

---

您需要设置“保留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;
}

---

我可能把我的问题简单化了。实际上。因此，

preserve-3d

不起作用。知道为什么吗？我想SVG不支持它，但我不确定。也许您可以将父容器设置为标准HTML，而只将子容器设置为SVG？也许那时它会起作用。

#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;
}