css3 tradurre in percentuale

Question

Sono bloccato sulla definizione di un cubo css3 completamente con percentuale.

Ecco un breve esempio in Codepen

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

Come si può vedere le facce del cubo hanno larghezza e l'altezza del suo elemento genitore, che funziona perfetto al 100%. Ora sto cercando di tradurre la parte inferiore del 50% in basso e il 50% indietro.

con i valori dei pixel questo non c'è nessun problema

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

ma con cento non succede nulla

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

è un altro modo? O mi sta sfuggendo qualcosa?

Answer 1

La percentuale non è del contenitore padre nel modo in cui ci si potrebbe aspettare ma dell'elemento stesso. La specifica descrive come:

[La percentuale] riferiscono [s] per le dimensioni della scatola dell'elemento

Per quanto riguarda% s, le specifiche dice:

Nota che i valori non sono consentiti nel valore di conversione translateZ e, se presente, il valore corretto è non valido.

Tuttavia, sembra che, invece, non sono validi in nessuno di essi per Chrome almeno.

dispiace :(

Answer 2

Il migliore che ho trovato è di fare un po 'di javascript.

Invece di utilizzare il valore translateZ(), ho usato il transform-origin: x y z per l'asse di essere a il centro del cubo.

il punto è che il cubo può accendere il suo centro (e non accende un centro della faccia principale e tradurre z ...)

Ecco il funzione di jQuery (eventualmente da applicare sul $(document).ready() e $(window).resize()):

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

si può vedere un DEMO qui ...