抱歉,这似乎很基本,但是我在网上搜索了却找不到其他答案(这使我觉得自己在做一些愚蠢的事情)。
我有一个 parent 和一个 child div。我正在尝试将CSS3 translationZ应用于 child ,但是似乎什么也没有发生。
translateX和translateY可以工作,也可以旋转,但translateZ不起作用。我疯了吗?
这是一个 fiddle :http://jsfiddle.net/Sb55D/1/
<div id="main">
<div id="child">
Lorem
</div>
</div>
#main {
display: block;
position: absolute;
width: 400px; height: 400px;
border: thin solid red;
top: 10px;
left: 10px;
-webkit-transform-style: preserve-3d;
}
#child {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 300px;
height: 300px;
border: thin solid green;
-webkit-transform: translate(-50%, -50%) translateZ(-400px);
-webkit-transform-style: preserve-3d;
}
最佳答案
您需要将perspective
应用于父元素,以使translateZ起作用...尝试添加以下内容:
#main {
display: block;
position: absolute;
width: 400px; height: 400px;
border: thin solid red;
top: 10px;
left: 10px;
/*-webkit-transform-style: preserve-3d; not needed on parent element */
-webkit-perspective: 1000;
}
DEMO
关于CSS3 -webkit转换: translateZ(xpx) not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18131864/