Menu
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?
241
The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width , height , margin , padding , and font-size . Note: Only calculated values can be inherited.
The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type.
The CSS translate() function is used to move elements in a two-dimensional space. It moves the position of the element on the plane by the amount provided by tx and ty . The translate() function accepts two arguments, indicating how much to move the element along the x and y axes respectively.
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 :(
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
