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](http://jsfiddle.net/wo6mos9r/5/) before applying rotating css.

And here is the [fiddle](http://jsfiddle.net/wo6mos9r/4/) after applying css. 

I want output like this [attachment](https://www.flickr.com/photos/133576321@N06/19177531431/in/dateposted-public/)

**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.