image rotation design by css and js

Question

I wanted to rotate an image by css and javascript. I do not have much knowledge in css. I have tried by transform. my css :

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

Here is the fiddle before applying rotating css.

And here is the fiddle after applying css.

I want output like this attachment

EDIT:

For more clear insight Image rotation is working fine. I am having problem in css. When i am adding css class it is overlaping top buttons. I need to rotate and adjust image in a way that image never overlap my buttons and my page footer.

Can anyone suggest me how can I adjust image that after rotating it will adjust his position and will not overlap top buttons or footer design?

Any suggestion will be appreciated.

I'm not sure to understand what do you want. Your rotate seems to work, no ? You want to rotate the image when we click on "rotate" ? — Mehdi Brillaud, Jun 26 '15 at 12:22
I don't see any difference with the image's rotation between the first and the desired result — TechWisdom, Jun 26 '15 at 12:22
Hello guys sorry for the late reply. Actually my rotation is working. I have problem in css. When i am adding css class it is overlaping top buttons. I am editing my question. — Awlad Liton, Jun 27 '15 at 17:17
I think i solved it :http://jsfiddle.net/wo6mos9r/8/ .. needed more test to be sure — Awlad Liton, Jun 27 '15 at 20:26

score 2 · Answer 1 · answered Jun 26 '15 at 12:26

Let's start by giving the image an id:

<img id="image" alt="Web_ileana-d-cruz" class="" src="https://photochute-dev.s3.amazonaws.com/uploads/event_image/image/108/web_ileana-d-cruz.jpg?c=1435318866">

Now just grab both the image and the rotate button by id and add an event listener to the rotate button:

var image = document.getElementById("image");

var rotateButton = document.getElementById("rotate_image_button");
rotateButton.addEventListener("click", function(e) {
    e.preventDefault();

    if(image.className === "rotate-90") {
        image.className = "";
    } else {
        image.className = "rotate-90";
    }

    return false;
});

And that's it. Basically on click you check whether or not the image has the rotated class and then just add/remove it.

This is even simpler if you use jquery. If the image can have more than just 1 class then you would need to use:

if((image.className+" ").indexOf("rotate-90 ") !== -1) {
    image.className = (image.className+" ").replace("rotate-90 ", "");
} else {
    if(image.className) {
        image.className += " rotate-90";
    } else {
        image.className = "rotate-90";
    }
}

JSFiddle: http://jsfiddle.net/wo6mos9r/3/

Thanks for your answer. But i actually already done what you have answered. My problem was after rotating image it was break design. It was overlap my buttons. Can you suggest me how can i adjust image that after rotating it will adjust his position and will not overlap top buttons or footer? — Awlad Liton, Jun 27 '15 at 17:22
It doesn't break on my browser (chrome). You might have to translate the rotated image and set the transform origin (or fix the image container to a set height) — Sebastian Nette, Jun 28 '15 at 03:26

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

To add to the first answer;

If you want the rotation to be animated aswell, you need to add this bit of CSS;

img {
   transition: rotate 0.5s ease; 
}

Please note that you will need browser prefix to make it work in all CSS3 browsers.

Update

With more info from the user, this problem seems to be a duplicate of Rotated elements in CSS that affects their parent's height correctly

edited May 23 '17 at 11:51

Community

1
1

answered Jun 26 '15 at 12:28

Magnus

108
7

Thanks. I do not need to animation. My problem was after rotating image it was break design. It was overlap my buttons. Can you suggest me how can i adjust image that after rotating it will adjust his position and will not overlap top buttons or footer? – Awlad Liton Jun 27 '15 at 17:24
I understand, and I have created a fiddle that reproduces the problem I think you are having. [fiddle](http://jsfiddle.net/de1g6s7a/). Is this it? – Magnus Jun 27 '15 at 18:33

Awlad Liton · Accepted Answer · 2015-06-29T09:59:44.263

I am answering it because someone can get help from this answer.

After some research and help from SO great users I have found solution of this issue.

Solution:

I needed to translateY(-100%) with transform origin and needed to set min height and width to image container div.

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}

After loading image I have set min height and width by js:

$("#single_image .cropBox img").load(function() {
     $("#single_image").css("minWidth", this.getBoundingClientRect().width)
     $("#single_image").css("minHeight", this.getBoundingClientRect().height)
   });

Here is the fiddle

image rotation design by css and js

3 Answers3

Linked