CSS3: ¿Cómo rotar y escalar una imagen al mismo tiempo?

Estoy muy confundido. ¿Por qué no puedo usar escalar y rotar al mismo tiempo? He intentado esto, pero no funciona:

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

Probé jQuery, pero tampoco funciona:

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

¿Cómo podría escalar una imagen y cuando hago clic con el botón derecho, luego giro 90 grados?

Puede rotar una imagen con CSS usando el transform propiedad con un rotate(**deg) valor

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

Al aplicar transform en varias líneas, es como cualquier otra propiedad de CSS, y se sobrescribe, por lo que solo se usa la última línea, al igual que con algo como:

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

solo se aplicaría el último, por lo que deberá poner todas las transformaciones en una transform.

Bueno, sobre la base de la respuesta de adeneo, una que incluye todos los navegadores capaces de Transformación CSS.

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

Ver ampliado JS violín.

No necesita escribir el código por separado para usar tanto la rotación como la escala, puede usarlo de la siguiente manera:

transformar: escalar (1.3) rotar (7 grados);

Puede escalar y rotar al mismo tiempo, pero TIENE que hacerlo en la misma línea, de lo contrario, sobrescribirá el valor anterior con el nuevo valor.

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

También tenga en cuenta que cualquier estilo ya existente en ese elemento se sobrescribirá, a menos que primero guarde ese estilo en una variable (de cadena) y agregue (agregue o concatene) los nuevos estilos a esa variable guardada y luego agregue la variable completa nuevamente en el elemento html.