如何倾斜与CSS 3D转换外回来时，向前倾斜内部元件(How to tilt inner eleme

我想获得的外元件沿着z轴和内部元件在正常2D透视竖立在它外面向后倾斜的效果。 换句话说给出这个网站

<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:

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

文章来源: How to tilt inner element forward when tilting outer back with css 3d transforms