css3 以百分比转换答案

【问题标题】：css3 translate in percentcss3 以百分比转换
【发布时间】：2016-11-16 10:45:47
【问题描述】：

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

这里是 Codepen 中的一个简短示例

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

像素值没问题

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

但是百分比没有任何反应

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

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

【问题讨论】：

【解决方案1】：

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

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

关于 %s，规范说：

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

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

对不起:(

【讨论】：

我发现的一些方便的方法是使用em 在translate 函数中使用相对距离。在父元素中设置em 的大小，然后在其中，1em 为 100%，0.5em 为 50%，依此类推。
你能扩展那个jaypeagi吗？

【解决方案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...

【讨论】：