We'll just be rotating a simple image in this example, so this is the only visible element we need in the <body>
element of the page.
Add the following
<img>
tag to a fresh copy of the template file:<img src="img/color-wheel.png" id="colorWheel">
At this point we don't even need any styles as everything we need to set can be done in the JavaScript which we'll add next.
In the anonymous function at the bottom of the HTML page, add the following code:
var img = $("#colorWheel"), offset = img.offset(), origWidth = img.width(), origHeight = img.height(), rotateStrings = [ "rotate(", 0, "deg)" ], getVendor = function() { var prefix = null, vendorStrings = { pure: "transform", moz: "-moz-transform", webkit: "-webkit-transform", op: "-o-transform" }; for (props in vendorStrings) { if(img.css(vendorStrings[props]) === "none") { prefix = vendorStrings[props]; } } ...