image rotation design by css and js

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.