CSS3百分比翻译(css3 translate in percent)

我坚持上完全百分比界定CSS3立方体。

在这里，在Codepen很短的例子

http://codepen.io/anon/pen/detAB

正如你所看到的立方体的表面具有100％的宽度和它的父元素，它可以完美的高度。 我现在想的底面的50％下降至50％回翻译。

与像素值，这是没有问题的

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

但百分之没有任何反应

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

有没有其他办法？ 还是我失去了一些东西？

Answer 1:

百分比存在你所期望的，但元素本身的方式父容器的不是。 该规范将其描述为：

[百分比]参见[S]对于元素的框的大小

关于％S，规范说：

需要注意的是值不会在translateZ翻译值允许的，如果存在的话将导致属性格式值无效。

虽然，似乎相反，它们不以任何人的铬至少有效。

对不起:(

Answer 2:

我发现最好的是做了一些JavaScript代码。

除了使用的translateZ()值，我用的transform-origin: xyz为坐标轴是在立方体的中心。

问题的关键是，该立方体可以打开它的中心（而不是开启主面的中心和翻译Z ...）

这里是jQuery的功能（最终上应用$(document).ready()和$(window).resize()

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

你可以看到一个DEMO这里...

文章来源: css3 translate in percent