css3 traduire en pourcentage

Je suis coincé sur la définition d'un css3 cube complètement avec pour cent.

Voici un petit exemple dans Codepen

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

Comme vous pouvez le voir, les faces du cube ont 100% de la largeur et la hauteur de son élément parent, qui fonctionne parfaitement. Maintenant, je suis en train de traduire la face inférieure de 50% duvet et 50%.

avec des valeurs de pixel ce n'est pas un problème

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

mais avec pour cent rien ne se passe

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

est-il un autre moyen? ou ai-je raté quelque chose?

source d'informationauteur Slemgrim

  1. 9

    Le pourcentage n'est pas du conteneur parent dans la façon dont vous vous en doutez, mais de l'élément lui-même. La spécification décrit comme:

    [Pourcentage] voir[s] à la taille de l'élément de la boîte de

    Quant à %s, la spec dit:

    Notez que les valeurs ne sont pas autorisés dans le translateZ
    traduction de valeur, et sera la cause de la propery de la valeur de la
    non valide.

    Cependant, il semble qu'au lieu de cela, ils ne sont pas valide dans l'un d'eux pour Chrome au moins.

    Désolé 🙁

  2. 0

    La meilleure que j'ai trouvé est de faire un peu de javascript.

    Au lieu d'utiliser le translateZ() valeur, j'ai utilisé le transform-origin: x y z pour l'axe pour être au centre du cube.

    Le point est que le cube peut tourner sur son centre (et de ne pas tourner sur un centre de la face principale et traduire z...)

    Ici est la fonction jQuery (éventuellement à appliquer sur $(document).ready() et $(window).resize()) :

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

    Vous pouvez voir un DÉMO ici...