Come ruotare + flip elemento con CSS

La proprietà transform consente di ruotare o capovolgere, ma come si possono eseguire entrambe contemporaneamente? Dite che voglio ruotare un elemento di 90 gradi e girarlo orizzontalmente? Entrambi sono fatti con la stessa proprietà, quindi quest'ultimo sovrascrive il primo. Ecco un esempio di violino per comodità:Come ruotare + flip elemento con CSS

http://jsfiddle.net/DtNh6/

transform: rotate(90deg); 
transform: scaleX(-1);

fonte

2013-06-10 chinabuffet

I giocherellava con jsfiddle, e questo ha funzionato:

$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

mettere in relazione alla tua domanda, il CSS risultante assomiglia

transform: rotate(90deg) scaleX(-1);

fonte

2013-06-10 00:43:19

Qualche idea se è supportata anche attraverso i browser? Grazie! – chinabuffet

Il bit delle proprietà separate dallo spazio è nella specifica - quanto bene "nelle specifiche" le mappe "supportate dai browser" è indovinato da nessuno, ma sarei sicuro di utilizzarlo credo (nella misura in cui fare affidamento su i browser che implementano le trasformazioni) –

Mi piace come ho risposto esattamente la stessa cosa prima di lui e tu hai segnato la sua come risposta. –

Le proprietà possono essere delimitati da spazi, in questo modo.

transform: rotate(90deg) scaleX(-1);

fonte

2013-06-10 00:41:53

Grazie, becuto a becbo se non posso accettare multipli: P – chinabuffet

Per le generazioni future, una risposta più completa :

.rotate2{ /*leaning left <- */ 
    -webkit-transform:rotate(270deg); 
    -moz-transform:rotate(270deg); 
    -o-transform:rotate(270deg); 
    -ms-transform:rotate(270deg); 
    transform:rotate(270deg); 
} 
.rotate4{ /*upside down*/ 
    -webkit-transform:rotate(180deg); 
    -moz-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
    -ms-transform:rotate(180deg); 
    transform:rotate(180deg); 
} 
.rotate6{ /*leaning right -> */ 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    transform:rotate(90deg); 
} 
.rotate8{ /*vertical flip*/ /*upside-down mirror*/ 
    -moz-transform: scale(1, -1); 
    -webkit-transform: scale(1, -1); 
    -o-transform: scale(1, -1); 
    -ms-transform: scale(1, -1); 
    transform: scale(1, -1); 
} 
.rotate10{ /*vertical flip*/ /*upside-down*/ 
    -moz-transform: rotate(90deg) scale(1, -1); 
    -webkit-transform: rotate(90deg) scale(1, -1); 
    -o-transform: rotate(90deg) scale(1, -1); 
    -ms-transform: rotate(90deg) scale(1, -1); 
    transform: rotate(90deg) scale(1, -1); 
} 
.rotate12{ /*horizontal flip*/ /*left-right mirror*/ 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    -ms-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
} 
.rotate14{ /*horizontal flip*/ /*left-right mirror*/ 
    -moz-transform: rotate(90deg) scale(-1, 1); 
    -webkit-transform: rotate(90deg) scale(-1, 1); 
    -o-transform: rotate(90deg) scale(-1, 1); 
    -ms-transform: rotate(90deg) scale(-1, 1); 
    transform: rotate(90deg) scale(-1, 1); 
}

fonte

2016-06-26 16:50:16

Come ruotare + flip elemento con CSS

risposta

Problemi correlati