Rotate an image in image source in HTML

CSS and data attributes in harmony

Taking advanced customization into account, you can apply HTML data- attributes to specify the rotation angle independently for each image:

<img src="image.jpg" data-rotate="90" alt="">


Then, reference this data attribute in your CSS:

img[data-rotate] {
  transform: rotate(attr(data-rotate deg));
}


This approach adheres to the good practice of separation of concerns, preserving the integrity of your HTML and CSS.

Power of CSS transform

The CSS transform property opens up a world of possibilities to rotate, scale, skew, or translate an element. Understanding its nuances is integral:

• Realize the origin point of the element is central.
• Know that rotation, by default, is clockwise in degrees.
• Post-rotation positioning and layout could impact neighboring elements.

Dynamic JavaScript for the interactive

Requiring more dynamic image rotations for user interaction, or timed changes? JavaScript is your solution. A simple script can enable you to update the rotation:

function rotateImage(imageId, degrees) {
  var image = document.getElementById(imageId);
  // Watch the world spin, one image at a time
  image.style.transform = 'rotate(' + degrees + 'deg)';
}


Simply call the function with the image ID and the desired rotation angle. This caters for flexibility in interactive elements.

CSS for animated elegance

If static isn't your style, exciting image rotations are achievable using CSS animations. Witness a constant spinning effect:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

img {
  animation: spin 5s linear infinite;
  // Let's get dizzy!
}


Starting from 0 degrees it spins a full cycle of 360 degrees, continuing indefinitely, and repeating every 5 seconds. Perfect for animated loading icons or logo displays.

Catering to every browser

Not all browsers are created equal. For older versions, ensure compatibility with vendor prefixes:

img {
  -webkit-transform: rotate(90deg); /* Because WebKit likes to stand out */
  -moz-transform: rotate(90deg);    /* Forefox feeling foxy */
  -ms-transform: rotate(90deg);     /* IE 9, yep it's still here! */
  transform: rotate(90deg);         /* Standard, just like your coffee */
}


Tips for perfect rotation

• Wrap images in a <div> for complex layouts post-rotation, because who doesn't love a good wrap?
• Experiment with rotation degrees, find the degree that makes your website degree-licious!
• Always test your image rotations across multiple browsers.
• Adjust the positioning post-rotation, it's like housekeeping for your site.

jQuery, for the love of simplicity

Embrace the easy life with the jQuery library:

$('#imageId').css('transform', 'rotate(90deg)');
// One line to rule them all!


This one-liner rotates an image and offers jQuery's friendly syntax and method chaining.