使用css 3d变换向后倾斜时如何向前倾斜内部元素 [英] How to tilt inner element forward when tilting outer back with css 3d transforms

问题描述

我想得到一个外部元素沿 z 轴向后倾斜的效果，而一个内部元素在正常的 2d 透视图中从它的外面站起来.换句话说，鉴于此 html

<div id="内部"></div>

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

我如何实现这一目标?使用css

div {显示:内联块；}#外{填充:20px；背景颜色:蓝色；-webkit-transform:透视(400px)rotateX(45deg)}#内{高度:150px；宽度:150px；背景色:番茄；背景图片:网址(http://www.w3schools.com/html/smiley.gif)；背景尺寸:100%；}

我以为我可以做到

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

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

解决方案

您需要设置保留 3d

#outer {填充:20px；背景颜色:蓝色；-webkit-transform:透视(400px)rotateX(45deg)；-webkit-transform-style: 保留-3d；}#内{高度:150px；宽度:150px；背景色:番茄；背景图片:网址(http://www.w3schools.com/html/smiley.gif)；背景尺寸:100%；-webkit-transform:rotateX(-45deg);-webkit-transform-origin:底部中心；}

jsbin

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.

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

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

解决方案

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屋！