css - css3 以百分比转换

Question

我坚持用百分比完全定义一个 css3 立方体。

这是 Codepen 中的一个简短示例

如您所见，立方体面具有其父元素的 100% 的宽度和高度，非常完美。现在我正在尝试将底面向下平移 50% 并向后平移 50%。

使用像素值，这没问题

transform: rotateX(-90deg) translateZ(50px) translateY(50px);

但是百分比没有任何反应

transform: rotateX(-90deg) translateZ(50%) translateY(50%);

还有其他方法吗？还是我错过了什么？

score 9 · Accepted Answer

您可能期望的方式不是父容器的百分比，而是元素本身的百分比。该规范将其描述为：

[百分比]是指[s]元素框的大小

关于 %s，规范说：

请注意， translateZ转换值中不允许有值，如果存在，将导致属性值无效。

不过，似乎相反，它们至少对 Chrome 中的任何一个都无效。

对不起：（

score 0 · Accepted Answer

我发现的最好的方法是做一些 javascript。

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

关键是立方体可以打开它的中心（而不是打开主面的中心并平移z ...）

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

function get50() {
  var half_width = $('#front').width() / 2;
  $('#front').css({
    transformOrigin : '50% 50% -' + half_width + 'px'
  });
}

你可以在这里看到一个演示......

2 回答 2