css3以百分比翻译 [英] css3 translate in percent

问题描述

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

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

正如你可以看到，立方体面具有100％的宽度和高度的父元素，这是完美的。现在我试图将底部面积翻译成50％和50％。

用像素值没有问题

  transform：rotateX（-90deg）translateZ（50px）translateY（50px）; 
  

但是没有发生任何事情。

  transform：rotateX（-90deg）translateZ（50％）translateY（50％）; 
  

有没有其他方法？或者我缺少某些东西？

解决方案

这个百分比不是父容器的方式，本身。规范描述为：

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

关于％s，规范说：

不允许在 translateZ
翻译值中，如果存在，将导致正确的值为
无效。

$ b

很抱歉，（

p>

I am stuck on defining an css3 cube completely with percent.

Here a short example in Codepen

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

As you can see the cube faces have 100% width and height of its parent element, which works perfect. Now i am trying to translate the bottom face 50% down and 50% back.

with pixel values this is no problem

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

but with percent nothing happens

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

is there any other way? or am I missing something?

解决方案

The percentage there is not of the parent container in the way you might expect but of the element itself. The spec describes it as:

[The percentage] refer[s] to the size of the element's box

Regarding %s, the spec says:

Note that values are not allowed in the translateZ translation-value, and if present will cause the propery value to be invalid.

Though, it seems that instead, they aren't valid in any of them for Chrome at least.

Sorry :(

这篇关于css3以百分比翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！