本文介绍了使用css 3d变换向后倾斜时如何向前倾斜内部元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想得到一个外部元素沿 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:底部中心;}
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;
}
这篇关于使用css 3d变换向后倾斜时如何向前倾斜内部元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!