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上，我将提升者div设置为90度，并且宽度为父级的50％。这样，在加注者的右边，我们将获得正确的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轴上旋转，以便您可以看到空间布局。

此外，提升者有一个文本，并且旋转85度而不是90度，这样更容易看到发生了什么。最终的代码是角度设置为90，没有文字。

Answer 2

在我想创建一个全宽旋转方格后，我来到了这个页面。我的解决方案是jquery 将翻译Z设置为窗口宽度的一半。

var windowWidth = ($(window).width() / 2) - 8;
    $('.front').css({
        'transform': 'translateZ(' + windowWidth + 'px)',
        '-webkit-transform': 'translateZ(' + windowWidth + 'px)',
        '-moz-transform': 'translateZ(' + windowWidth + 'px)'
    });
    $('.back').css({
        'transform': 'rotateY(-180deg) translateZ(' + windowWidth + 'px)',
        '-webkit-transform': 'rotateY(-180deg) translateZ(' + windowWidth + 'px)',
        '-moz-transform': 'rotateY(-180deg) translateZ(' + windowWidth + 'px)'
    });
    $('.right').css({
        'transform': 'rotateY(90deg) translateZ(' + windowWidth + 'px)',
        '-webkit-transform': 'rotateY(90deg) translateZ(' + windowWidth + 'px)',
        '-moz-transform': 'rotateY(90deg) translateZ(' + windowWidth + 'px)'
    });
    $('.left').css({
        'transform': 'rotateY(-90deg) translateZ(' + windowWidth + 'px)',
        '-webkit-transform': 'rotateY(-90deg) translateZ(' + windowWidth + 'px)',
        '-moz-transform': 'rotateY(-90deg) translateZ(' + windowWidth + 'px)'
    });

jsFiddle

希望这对某些人有用。

Answer 3

我设法做到的唯一方法是使用一些JavaScript ...

我已更新您的演示 HERE

我没有使用BoundNames值，而是使用 translateZ() 让轴位于多维数据集的中心。

这是jQuery函数（最终适用于transform-origin: x y z和$(document).ready()）：

$(window).resize()

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

3 个答案:

Demo for webkit