Question

很抱歉，如果这看起来很基本，但我在网上搜索并找不到另一个答案（这让我觉得我做的事情很愚蠢）。

我有一个父母和一个孩子div。我正在尝试将CSS3 translateZ应用于孩子，但似乎没有发生任何事情。

translateX和translateY工作，以及旋转，但不是translateZ。我疯了吗？

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

Answer 1

您需要将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-transform：translateZ（xpx）不起作用

1 个答案: