如何倾斜外回来的CSS 3D转换时，倾斜内部元件前进 [英] How to tilt inner element forward when tilting outer back with css 3d transforms

问题描述

我想获得的外部元件后倾沿z轴和站立起来了，它在一个普通的2D视角内部元件的作用。在给这个网站换句话说

I would like to get an effect of an outer element tilting back along the z axis and an inner element standing up out of it in a normal 2d perspective. In other words given this html

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

我想外部元件，其侧面线条接近消失点向后倾斜，而内部元件的两侧垂直。

I would like the outer element to tilt backwards with its side lines approaching a vanishing point while the inner element's sides are vertical.

我如何做到这一点？使用CSS

How do I achieve this? Using the 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%;    
}

我想我可能只是做

I thought I could just do

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

但只是使之倾斜更多。 这里是一个jsbin

but that just makes it tilt more. Here is a jsbin

推荐答案

您需要设置preserve 3D

You need to set 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

这篇关于如何倾斜外回来的CSS 3D转换时，倾斜内部元件前进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！