Ottenere il CSS dopo transform: scale() e transform-origin

[fede220]

Salve a tutti, non so se questa è la sezione giusta nel caso chiedo scusa. In una pagina web ho un inline CSS con transform: scale() e transform-origin. Ho letto su internet che esiste Element.getBoundingClientRect() ma fa ottenere solo le dimensioni e le posizioni degli elementi relativi alla viewport. Chiedo a qualcuno se è possibile tramite Element.getBoundingClientRect() ottenere il CSS con i valori (anche font-size, ecc) dopo transform: scale() e transform-origin implementando nella pagina web codice JavaScript apposito per ottenere il CSS nella console del browser. Spero che esiste un modo per ottenere per ottenere il CSS perchè ho già provato ma non so come farlo (non riesco ad ottenere il CSS con i valori dopo le trasformazioni). Chiedo di nuovo scusa se ho scritto nella sezione sbagliata.

[Shores]

Ma perchè ti serve sapere questa informazione? Comunque, se applichi solo scale(x), le dimensioni saranno quelle originali moltiplicate per il fattore di scala x, visto che non importa quale sia la transform-origin...

[fede220]

Applicando solo transform: scale(x) ottengo il css dopo la trasformazione? Grazie per la cordialità.

[Shores]

No, non esiste, che io sappia, il modo di ottenere quello che vuoi tu, perchè le transform vengono sempre applicate per ultime, e NON modificano lo stile precedente, ma si aggiungono.

Quel che intendo dire è che se un elemento ha per esempio width:200px e transform: scale(0.5) è facile calcolare che width alla fine sarà 100px; questo calcolo però lo devi fare tu, non c'è nessun modo che io sappia di andare ad ottenere questa informazione.

Ma rinnovo il quesito: perchè ti serve di sapere questo?

[fede220]

Mi serve sapere questo per avere il css dopo le trasformazioni. Se per esempio width 200px e transform: scale(5) il calcolo sarà 200 * 5= 1000px? Giusto? Questo vale anche per il padding, margin e line-height? Grazie proverò con i calcolo manuali.

[Shores]

Si, il calcolo che fai è esatto, ma di nuovo, perchè ti serve avere il valore dopo applicata la transform? Cosa ci devi fare? Magari c'è un modo più semplice di ottenere ciò che vuoi, ma se non mi spieghi cosa stai cercando di fare, difficilmente riuscirò ad aiutarti...

[fede220]

Quello che sto cercando di fare è ottenere i valori dopo il transform per copiarli e sostituirli nei selettori di un css. Spero che mi hai capito.

[fede220]

Ah ti ho inviato un messaggio privato chiedendoti se puoi aiutarmi su un'altra cosa. Quando puoi ed hai tempo puoi leggerlo. Grazie

[Shores]

Mmm, forse non mi sono spiegato: come ti ho già detto, ho capito che vuoi "leggere" il css dopo le trasformazioni per "copiarlo" in un selettore, ma questo:

1) Probabilmente non è possibile...
2) Non ha senso: semplicemente lascia nel CSS le trasformazioni, che fastidio danno?
3) Ancora non mi hai detto PERCHE' vuoi fare questo: detto in altri termini: a cosa ti serve "copiarli e sostituirli"? Quale è la funzionalità o la ragione che ti porta a voler fare questa copia e sostituzione?

[fede220]

Ciao il motivo per fare questa copia e sostituzione è rimuovere transform: scale() nel css e incollare i valori dopo le trasformazioni, seguo il tuo consiglio lascio le trasformazioni nel CSS, penso che la maggior parte dei browser supporti transform: scale(). Ah non so se hai visto il messaggio privato che ti ho inviato, per favore puoi leggerlo?