CSS3: come ruotare e ridimensionare un img allo stesso tempo?

Sono molto confuso. Perché non posso usare la scala e ruotare allo stesso tempo? Ho provato questo, ma non funziona:CSS3: come ruotare e ridimensionare un img allo stesso tempo?

.rotate-img{ 
    -webkit-transform:scale(2,2); 
    -webkit-transform:rotate(90deg); 
    margin-left:20%; 
    margin-top:10%; 
}

ho provato jQuery, ma non funziona né:

<style> 
.zoom{ 
     -webkit-transform:scale(2,2); 
     margin-left:20%; 
     margin-top:10%; 
    } 
</style> 
<script> 

    $(document).ready(function(){ 
     $("img").dblclick(function(){ 

      $(this).addClass("zoom"); 

      $(this).contextmenu(function(){ 
       $(this).css("-webkit-transform","rotate(90deg)"); 
       return false; 
      }) 
     }); 
    }) 

    </script>

Come potrei ridimensionare l'img e quando ho CLIC il tasto destro del mouse quindi ruotare di 90 gradi

fonte

2013-04-02 Anonymous

Cosa succede quando provi il codice così com'è e in che browser l'hai provato? – Adrian

Quello che è successo è che l'img ruota di 90 gradi ma la proprietà della scala si abbassa, voglio dire, l'img ritorna alla sua scala originale. E sto usando Google Chrome. @Adrian –

http://jsfiddle.net/yKF8d/ - funziona qui –

È possibile ruotare un'immagine con i CSS utilizzando la proprietà transform con un valore rotate(**deg)

.rotate-img { 
 
    -webkit-transform : rotate(90deg) scale(0.2); /* Chrome, Opera 15+, Safari 3.1+ */ 
 
    -ms-transform  : rotate(90deg) scale(0.2); /* IE 9 */ 
 
    transform   : rotate(90deg) scale(0.2); /* Firefox 16+, IE 10+, Opera */ 
 
    left : -200px; 
 
    position: relative; 
 
}

<img class="rotate-img" src="https://appharbor.com/assets/images/stackoverflow-logo.png" />

Quando si applica transform su più righe, è come qualsiasi altra proprietà CSS, e quanto essa viene sovrascritta quindi viene utilizzata solo l'ultima riga, come per esempio:

.myclass { 
    top: 100px; 
    top: 400px; 
}

si applica solo l'ultimo, quindi sarà necessario inserire tutte le trasformazioni in uno transform.

fonte

2013-04-02 15:45:53 adeneo

Si noti che l'ordine è importante - probabilmente si desidera "ruotare" e poi "ridimensionare" (come scritto sopra) per mantenere la prospettiva del proprio elemento; invertendo l'ordine si deformerà l'elemento. Vedi http://stackoverflow.com/a/5395185/957950. – brichins

Grazie @adeneo. Snippet utile. –

Bene, basandosi sulla risposta di adeneo, una che include tutti i brower in grado di CSS transform.

.rotate-img { 
    -webkit-transform: rotate(90deg) scale(2.2); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */ 
     -moz-transform: rotate(90deg) scale(2.2); /* Fx 3.5-15 */ 
     -ms-transform: rotate(90deg) scale(2.2); /* IE 9 */ 
     -o-transform: rotate(90deg) scale(2.2); /* Op 10.5-12 */ 
      transform: rotate(90deg) scale(2.2); /* Fx 16+, IE 10+ */ 
    margin: 10% 0 0 20%; 
}

Vedere l'estensione JS Fiddle.

fonte

2014-03-27 21:47:13

CSS3: come ruotare e ridimensionare un img allo stesso tempo?

risposta

Problemi correlati