CSS3: Jak obracać i skalować obraz w tym samym czasie?

Question

Jestem bardzo zdezorientowany. Dlaczego nie mogę używać skali i obracać w tym samym czasie? Próbowałem to, ale to nie działa:

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

próbowałem jQuery, ale nie działa ani:

<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> 

Jak mogę skalować img i kiedy clic kliknij prawym przyciskiem myszy, a następnie obrócić o 90 stopni

Answer 1

można obrócić obraz z CSS za pomocą właściwości transform z rotate(**deg) wartości

.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" />

Przy stosowaniu transform na wielu liniach, to jest jak każdy inny własności CSS, i zostaną nadpisane więc używana jest tylko ostatnia linia, podobnie jak z czymś takim:

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

dotyczy tylko ostatniego, więc musisz umieścić wszystkie transformacje w jednym transform.

Answer 2

Cóż, na podstawie odpowiedzi udzielonej przez adeneo, obejmującej wszystkich przeglądarek, którzy mogą uzyskać 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%; 
} 

Zobacz rozszerzone JS Fiddle.