Menu
I'd like to rotate an image on a webpage through four orientations at 90 degrees apart. I'd prefer this to happen on the client machines. Can this be done using css? Or will I need to use javascript?
Thank you for your time.
618
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.
You can specify a rotate that is clockwise using a positive degree number (i.e. 45). Or, you can rotate in the opposite direction using a negative degree value (i.e. -39). The rotate() function can apply to any HTML element.
We can add the following to a particular tag in CSS: -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); In case of half rotation change 90 to 45 .
It is possible however only for new browsers.
Best Link I could find (Chrome / Safari / Firefox) with example
Sample source code (Safari/Chrome)
Sample source code (Firefox)
SO post containing code for IE Webkit and Firefox
88
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
