CSS3: How to rotate and scale an img at the same time?

I'm very confused. Why can't I use scale and rotate at the same time? I've tried this, but it does not work:

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

I tried jQuery, but does not work neither:

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

How could I scale an img and when I clic the right click then rotate 90 deg.

You can rotate an image with CSS using the transform property with a rotate(**deg) value

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

When applying transform on multiple lines, it's like any other CSS property, and it gets overwritten so only the last line is used, just like with something like :

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

only the last one would apply, so you'll need to put all the transformations in one transform.

Well, building on top of adeneo's answer, one that includes all browers capable of 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%;
}

See extended JS Fiddle.

You do not need to write code separately to use both rotate and scale u can use it look like this :

transform: scale(1.3) rotate(7deg);

You can scale & rotate at the same time, but you HAVE to do it on the same line, otherwise you overwrite the prievius value with the new value.

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

Also notice that any already existing style on that element will be overwritten, unless you save that style into a (string-)variable first & add (append or concatenate) the new styles to that saved variable & then add the whole variable back onto the html-element.

CSS3: How to rotate and scale an img at the same time?

Related

Recent Posts