rotating background image with css for & lt; img & gt;

advertisements

I tried to rotate image with -webkit-transform from jquery to rotate a background image for an <img> tag. which is actually rotating the src image. I tried :before to rotate background image in particular, still no luck.

HTML :

<img class="customUpload" id="customUploads" style="height: 581px; background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png); background-size: 80%; background-repeat: no-repeat no-repeat;" src="http://th04.deviantart.net/fs71/PRE/i/2011/340/d/5/picture_frame_png_01_by_thy_darkest_hour-d4idwz6.png">

JS :

$(document).ready(function(e){
    $("#customUploads").css('-webkit-transform','rotate(60deg)');
});

DEMO FIDDLE

[Update] I just need to set the frame 90deg. Where as the inside HTML5 LOGO to rotate.


CSS transforms always apply to an element. If you want to rotate two things separately you need to create two elements:

<div id="frame"><img id="logo"></div></div>

Now you can use the CSS transform to rotate the #logo inside the #frame.

Demo on JSFiddle

http://jsfiddle.net/bikeshedder/c6KUP/8/