如何向前倾斜内部元素时倾斜外后与css三维变换

Question

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

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

我希望外部元素向后倾斜，其边线接近消失点，而内部元素的侧面是垂直的。

我该如何做到这一点？使用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%;    
}

我以为我可以做

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

但这只会让它更加倾斜。这是一个jsbin

Answer 1

您需要设置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