CSS3: How to rotate and scale an img at the same time?
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 scaleu can use it look like this :
transform: scale(1.3) rotate(7deg);