CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Santhosh Kumar
Santhosh Kumar

Reputation: 190

rotating background image with css for <img>

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.

Upvotes: 1

Views: 4609

Answers (2)

Sunny Shukla
Sunny Shukla

Reputation: 565

enter image description here

As shown in the image above 1) is -90 degree or 270 degree rotation 2) is +90 degree rotation and 3) is 180 degree rotation.

Note :- The quadrant containing blue square is the original image position in web browser when displayed with img tag. This is the only visible section to developer in web browser. On rotation of image from its top left point it will switch to the invisible quadrant. Hence it is very very important to use translateX and translateY property along with rotate property in css to drag the image from invisible quadrant to visible quadrant to display it on web browser. Please refer to css transform property for more info.

The css for the same is as below

.image_rotate_270 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg)  translateX(-100%);
}


.image_rotate_90 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg)  translateY(-100%);
}


.image_rotate_180 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(180deg) translateX(-100%) translateY(-100%);
    -webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%);
    -ms-transform: rotate(180deg)  translateX(-100%) translateY(-100%);
}

Now use this class names inside the class property of img tag.

<img src="xyz.jpg" id="image" class="image_rotate_90"/>

For rotation of -90 and +90 you will sometimes need to alter its height and width either with screen resolution or with original image resolution so that image will retain its original shape. Do it using javascript inside the body tag after image is loaded. 

<script>
    document.getElementById("image").width = screen.height;
    document.getElementById("image").height = screen.width;
</script>

Suppose your original image is of 640 X 480 resolution. i.e. width = 480 and height = 640. So when you rotate the image, it becomes a image with resolution 480 X 640. So to retain its original shape. You can do the following under body tag after image loaded .

<script>
    document.getElementById("image").width = 480px;
    document.getElementById("image").height = 640px;
</script>

Upvotes: 0

bikeshedder
bikeshedder

Reputation: 7487

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/

Upvotes: 2

Related Questions