Question

我坚持用百分比完全定义一个css3多维数据集。

这是Codepen中的一个简短示例

正如您所看到的，立方体面具有100％的父元素宽度和高度，这非常有效。现在我试图将底部面积减少50％，将50％反转。

有像素值这没问题

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

但百分之百没有发生

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

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

Answer 1

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

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

关于％s，规范说：

请注意， translateZ 中不允许使用值翻译价值，如果存在，将导致价值无效。

尽管如此，它们似乎至少对Chrome中的任何一个都无效。

抱歉:(

Answer 2

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

我没有使用translateZ()值，而是使用 transform-origin: x y z 让轴位于多维数据集的中心。

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

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

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

您可以在此处看到 DEMO ...