CSS3: एक ही समय में एक आईएमजी घुमाने और स्केल करने के लिए कैसे?

Question

मैं बहुत उलझन में हूं। मैं एक ही समय में पैमाने का उपयोग क्यों नहीं कर सकता? मैं इस की कोशिश की है, लेकिन यह काम नहीं करता है:

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

मैं jQuery की कोशिश की, लेकिन न तो काम नहीं करता:

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

मैं एक img कैसे पैमाने सकता है और जब मैं तो राइट क्लिक 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 लागू करने, यह किसी भी अन्य सीएसएस संपत्ति की तरह है साथ transform संपत्ति का उपयोग कर सीएसएस के साथ एक छवि घुमा सकते हैं, और यह ओवरराइट हो जाता है इसलिए केवल अंतिम पंक्ति का उपयोग किया जाता है, जैसे कुछ:

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

केवल अंतिम व्यक्ति लागू होगा, इसलिए आपको सभी परिवर्तनों को एक transform में रखना होगा।

Answer 2

ठीक है, एडेनो के उत्तर के शीर्ष पर निर्माण, जिसमें 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 देखें।