Css and js image rotation design

Question

I wanted to rotate the css and javascript image. I don't have enough knowledge in css. I tried 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's how to fiddle before applying rotating css.

And here is the fiddle after applying css.

I want this conclusion embedding

EDIT:

For a clearer understanding of image rotation, it works fine. I have a problem in css. When I add the css class, it overrides the top buttons. I need to rotate and adjust the image so that the image never overlaps my buttons and page footer.

Can someone suggest me how to set up an image that after rotation will change its position and will not overlap the top buttons or footer?

Any suggestion would be appreciated.

Answer 1

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

After some research and help from SO great users, I found a solution to this problem.

Decision:

I needed translateY(-100%) with the start of the conversion and I had to set the minimum height and width in the div of the image container.

 .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 the image, I set the minimum height and width to 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

Answer 2

Let's start by providing the id image:

 <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 take both the image and the id rotate button 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; }); 

What is it. Basically, when you click, you check if the image has the class rotated or not, and then just adds / removes it.

This is even easier if you use jquery. If the image can have no more than one class, you will 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/

Answer 3

To add to the first answer,

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

 img { transition: rotate 0.5s ease; } 

Note that you will need a browser prefix to work in all CSS3 browsers.

Update

With additional information from the user, this problem seems to be a duplicate of Rotary elements in CSS that correctly affect their parent height