Scala di trasformazione CSS, non ridimensionare l'elemento figlio

Question

Se si dispone di un div con alcuni elementi figlio ed è trasformato in css in scala. Ho un elemento figlio che io non voglio scalare

#parent{ 
 
    -webkit-transform: scale(.5); 
 
} 
 
    
 
span:last-child{ 
 
    -webkit-transform: Something to ignore the parent scale; 
 
}

<div id="parent"> 
 
    <span>Child 1</span> 
 
    <span>Child 2</span> 
 
    <span>Child 3 (Don't Scale Me)</span> 
 
</div>

questo può essere fatto solo con i CSS? Senza cambiare l'html o usando js.

Answer 1

Purtroppo questo non è possibile.

È grosso modo avete altre due opzioni: però

1. Scala tutti gli altri elementi, escludendo quello che non si vuole scalare (ma questo non scala il contenitore).
2. Ridimensionare il contenitore e ridimensionare l'elemento che non si desidera ridimensionare (ma questo probabilmente lo renderà sfocato).

Esempi:

// Example 1. 
span:not(:last-child) { 
    display: inline-block; /* You can't scale inline elements */ 
    transform: scale(2); 
} 

// Example 2. 
#parent{ 
    transform: scale(.5); 
} 

span:last-child{ 
    transform: scale(2); 
} 

Answer 2

Ho paura che sia necessario utilizzare un selettore più dettagliato, come questo #parent > span:not(:last-child). Example.

Answer 3

C'è solo un webkit bug relativo (trovato in Chrome 44) che permette che le trasformazioni non sono impostate correttamente. Se si utilizza css-perspective insieme allo zoom del browser, il valore z viene erroneamente ridimensionato dal fattore di ingrandimento del browser. Ma questo bug è molto raro.

Answer 4

Ho trovato hack per Chrome per risolvere il problema con lo sfocato.

#parent { transform: scale(5);} 
#child { transform: scale(0.2) translate3d(0, 0, 0);}