CSS3: Как вращать и масштабировать img одновременно?

Я очень смущен. Почему я не могу использовать масштаб и вращать одновременно? Я пробовал это, но он не работает:

.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, и когда я кликнул правый клик, тогда поверните на 90 град.

Ответы

Ответ 1

Вы можете повернуть изображение с помощью CSS с помощью свойства transform со значением 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" />

Ответ 2

Хорошо, основываясь на ответе adeneo, который включает в себя все броузеры, способные 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%;
}

См. расширенный JS Fiddle.