JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://c.xkcd.com/redirect/comic/now" title="This image stays roughly in sync with the day (assuming the Earth continues spinning). Shortcut: xkcd.com/now" alt="Now" id="comic_now">
JavaScript
function rotateImage() {
var now = new Date();
// Get hours
var offset = 12 - now.getHours();
if (offset < 0) offset += 24;
// Convert to minutes
offset = (offset * 60) + now.getMinutes();
// Calculate degrees
var degrees = (offset / (24 * 60)) * 360;
// Reset image & rotate.
var img = document.getElementById('comic_now');
img.src = "http://c.xkcd.com/redirect/comic/now";
['', '-o-', '-moz-', '-webkit-', '-ms-'].forEach(function(prefix){
img.style.setProperty(prefix + 'transform', 'rotate(' + degrees + 'deg)');
})
}
rotateImage();
setInterval(rotateImage, 30000);