css - 使用CSS 3D变换向后倾斜外部元素时如何向前倾斜内部元素

我想得到一个外部元素沿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

最佳答案

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

关于css - 使用CSS 3D变换向后倾斜外部元素时如何向前倾斜内部元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23373737/