javascript - CSS3 - 基于父 div 百分比的 translateZ？

Question

我有一个带有大型模型的网页，紧随其后的是 example (找到代码 here)。

在代码中，您会看到 translateZ 参数都是 25px 或 -25px，这是菜单项高度的一半，对于旋转的正常工作非常重要。

This是我的代码版本，单击立方体面旋转它。我试图使相同的代码工作，但使用百分比宽度和百分比高度 div 而不是静态的。 translateZ 值保持不变，因此您可以看到这使得立方体看起来很奇怪，具体取决于窗口大小。 每当窗口调整大小时，如何将 translateZ 值更新为立方体宽度/高度的一半？

我尝试用 JavaScript 来做，但得到了 this .立方体不会在单击时移动并在调整大小时滑入和滑出，但如果您单击它一次然后调整窗口大小，它就会移动。这是为什么？

Answer 1

我认为您不能根据 div 大小设置 translateZ。但是，您可以使用另一个 div 来获得该效果；而这个 div 当然可以基于父级的 div 大小。

html 将包含以下内容:

<div id="base">
    <div class="raiser">raiser
        <div class="face1">FACE UP
            <div class="face2">side</div></div></div>
</div>

我的想法是，在基础 div 上，我将 raiser div 设置为 90 度，宽度为父级的 50%。这样，在 raiser 的右侧，我们将获得正确的 Z 位置。

CSS 如下:

div {
    -webkit-transform-style: preserve-3d;
}

#base {
    margin-left: 10%;
    width: 40%;
    height: 50%;
    font-size: 40px;
    -webkit-transition: 10s;
    background-color: rgba(128, 128, 128, 0.21);
}

.rotated {
    -webkit-transform: rotateY(90deg);
}

.raiser {
    -webkit-transform: rotateY(85deg);
    -webkit-transform-origin-x: 0%;
    position: absolute;
    width: 50%;
}

.face1 {
    background-color: lightblue;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin-x: 0%;
    position: absolute;
    width: 200%;
    left: 100%;
    top: 0px;
}

.face2 {
    background-color: lightgreen;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-origin-x: 0%;
    left: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
}

Demo for webkit

在演示中，您会看到有一个复选框“倾斜”。如果你勾选这个，所有的布局都会在X轴上旋转，这样你就可以看到空间布局。

另外，raiser 有一个文本并且旋转了 85 度而不是 90 度，这样更容易看到发生了什么。最终代码将 Angular 设置为 90，并且没有文本。