CSS3: Wie kann man ein Bild gleichzeitig drehen und skalieren?

Ich bin sehr verwirrt. Warum kann ich nicht gleichzeitig skalieren und drehen? Ich habe das versucht, aber es funktioniert nicht:

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

Ich habe jQuery ausprobiert, funktioniert aber auch nicht:

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

Wie könnte ich ein Bild skalieren und wenn ich mit der rechten Maustaste klicke, dann um 90 Grad drehen.

Sie können ein Bild mit CSS drehen, indem Sie die verwenden transform Eigentum mit a rotate(**deg) Wert

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

Bei der Bewerbung transform In mehreren Zeilen ist es wie jede andere CSS-Eigenschaft und wird überschrieben, sodass nur die letzte Zeile verwendet wird, genau wie bei etwas wie:

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

nur die letzte würde zutreffen, also müssen Sie alle Transformationen in einer zusammenfassen transform.

Nun, aufbauend auf der Antwort von adeneo, eine, die alle Browser enthält, die dazu in der Lage sind CSS-Transformation.

.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%;
}

Siehe erweitert JS Geige.

Sie müssen den Code nicht separat schreiben, um sowohl Rotieren als auch Skalieren zu verwenden. Sie können ihn so verwenden:

transformieren: skalieren (1.3) drehen (7 Grad);

Sie können gleichzeitig skalieren und drehen, aber Sie MÜSSEN dies in derselben Zeile tun, da Sie sonst den vorherigen Wert mit dem neuen Wert überschreiben.

let htmlElement = document.getElementById("rotate-img");
let scaleX = -0.3;
let scaleY =  0.2;
let angle  =  45 ;

// NOTICE!! THE BACK-TICKS, not regular quotes. Will decode variables inside before printing.

// Code for Safari
htmlElement.style.WebkitTransform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; 

// Code for IE9
htmlElement.style.msTransform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; 

// Standard syntax
htmlElement.style.transform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; 

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

Beachten Sie auch, dass alle bereits vorhandenen Stile für dieses Element überschrieben werden, es sei denn, Sie speichern diesen Stil zuerst in einer (String-)Variablen und fügen die neuen Stile zu dieser gespeicherten Variable hinzu (anhängen oder verketten) und fügen dann die gesamte Variable wieder hinzu html-Element.