Come si misura l'altezza di un elemento HTML ridimensionato con la trasformazione CSS3?

Question

Innanzitutto, è necessario conoscere il contesto.

Browser: Chrome

HTML:

<ul> 
    <li> 
     <div>Hi!</div> 
    </li> 
</ul> 

CSS:

li { 
    -webkit-transform: scale(0.21); 
    -webkit-transform-origin-x: 0%; 
    -webkit-transform-origin-y: 0%; 
} 

div { 
    height: 480px; 
    width: 640px; 
} 

L'altezza effettiva del elemento li è 101px. Se si tenta di ottenere l'altezza in Javascript da uno dei seguenti metodi (supponendo jQuery 1.4.2 è caricato):

$("li")[0].clientHeight; 
$("li")[0].scrollHeight; 
$("li").height(); 
$("li").innerHeight(); 

si ottiene la stessa risposta: 480px.

Se si passa il mouse sull'elemento utilizzando gli strumenti di sviluppo di Chrome, vengono visualizzate le dimensioni: 136x101. (In realtà, il primo numero, la larghezza, cambia con la larghezza della finestra, ma non è revelvant alla mia domanda.) Non so come Chrome arrivi a questo, ma di sicuro mi piacerebbe farlo.

Qualcuno sa di un modo per ottenere l'altezza di un elemento dopo essere stato ridimensionato, o è necessario calcolarlo in qualche modo?

Answer 1

Questo è in realtà una domanda molto interessante, questo è quello che sono riuscito a trovare:

node = document.getElementById("yourid"); 
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform); 
var realHeight = $("li").height() * curTransfrom.d; 

Ci potrebbe essere un modo più semplice per ottenere l'altezza reale.

Answer 2

Non penso che ci sia un cross-browser (o anche un browser specifico) per farlo. Quello che vorrei fare è

var realHeight = $("li").height() * 0.21; 

Chrome probabilmente ottiene il valore direttamente dal suo motore di rendering.