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

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

但这只会让它倾斜得更多。 Here is a jsbin

Answer 1

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