CSS3: Làm cách nào để xoay và chia tỷ lệ img cùng một lúc?

Question

Tôi rất bối rối. Tại sao tôi không thể sử dụng tỷ lệ và xoay cùng một lúc? Tôi đã thử điều này, nhưng nó không hoạt động:

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

tôi đã cố gắng jQuery, nhưng không hoạt động không:

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

Làm thế nào tôi có thể mở rộng quy mô một img và khi tôi clic click chuột phải rồi xoay 90 độ.

Answer 1

Bạn có thể xoay một hình ảnh với CSS sử dụng transform tài sản với giá trị 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" />

Khi áp dụng transform trên nhiều dòng, nó giống như bất cứ tài sản CSS khác, và nó được ghi đè do đó, chỉ dòng cuối cùng được sử dụng, giống như với một cái gì đó như:

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

chỉ cái cuối cùng sẽ được áp dụng, vì vậy bạn sẽ cần phải đặt tất cả các phép biến đổi trong một transform.

Answer 2

Vâng, xây dựng trên đầu trang của câu trả lời của adeneo, một trong đó bao gồm tất cả các trình duyệt có khả năng 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%; 
} 

Xem phần mở rộng JS Fiddle.