css3以百分比换算

Question

我坚持用百分比完全定义一个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 转换值中不允许使用值,如果存在,则会导致属性值无效.

但是,似乎相反,它们至少对Chrome中的任何一个都无效.

对不起:(