2

我有一个遵循此示例的带有大型模型的网页（在此处找到代码）。

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

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

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

4

3 回答 3

1

在我想创建一个全宽的旋转正方形后，我来到了这个页面。我的解决方案是 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

希望这对那里的人有用。

于 2014-02-21T16:03:31.143 回答
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%;
}

webkit 的演示

在演示中，您将看到有一个“倾斜”复选框。如果选中此项，所有布局将沿 X 轴旋转，以便您可以看到空间布局。

此外，加注器有一个文本，并且旋转了 85 度而不是 90 度，因此更容易看到正在发生的事情。最终代码将角度设置为 90，并且没有文本。

于 2013-04-28T19:27:24.717 回答
0

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

我在这里更新了你的演示

translateZ()我没有使用该值，而是使用transform-origin: x y zfor 轴位于立方体的中心。

这是 jQuery 函数（最终应用于$(document).ready()and $(window).resize()）：

function half_width() {
  var w = $('#front').width() / 2; // front face of the cube
  $('#front').css({
    transformOrigin : '50% 50% -' + w + 'px'
  });
}
于 2016-11-16T02:50:19.613 回答