Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

How do you scale and rotate at the same time in CSS?

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.

How do you resize or scale objects in CSS3?

scale() The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.

How do I rotate an image in CSS3?

css file, stylesheet, or <style> tags, you can use the CSS class name in any of your image tags. To rotate an image by another measure of degrees, change the "180" in the CSS code and <img> tag to the degree you desire.

Can I use CSS transform rotate?

The transform CSS property lets you rotate, scale, skew, or translate an element.


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.