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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With