How to find the center point of Transform Rotate when animating with CSS?

Question

I'm trying to make a menu that rotates 45 degrees when hovering, should get bigger in height (to cover the corners) and should also stay in the original center point. I got all of that done expcept for the div staying in the center of where it originally started.

Is it possible by just animating with CSS? Here is a fiddle of what I have so far, when you scale the window you see it keeps changing position:

```
http://jsfiddle.net/h487xz9d/66/
```

edit: sorry for the formatting of the link, I couldn't figure out how to send a post without that. Here is a picture of what I'm trying to get it look like

Answer 1

I fixed it never mind! I added this to the bobmarley class:

height: 600%;
position: relative;
top: -250%;