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

Question

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


        

Answer 1

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

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.