CSS3：imgを同時に回転させてスケールするには？

Question

私は非常に混乱しています。スケールと回転を同時に使用できないのはなぜですか？私はこれを試してみたが、それは動作しません：

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

私はjQueryのを試してみましたが、どちらも動作しません：私はIMGを拡張できるか

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

をし、ときに私は右クリックをCLIC 90度回転する。

Answer 1

あなたは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" />

複数の行にtransformを適用する場合、それは他のCSSプロパティのようなものだし、それが上書きされてtransformプロパティを使用して、CSSで画像を回転させることができます

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

のように、最後の行だけが使用されます。

最後のものだけが適用されるので、すべての変換を1つのtransformに入れる必要があります。

Answer 2

まあ、adeneoの回答の上に構築してください。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%; 
} 

拡張子JS Fiddleを参照してください。