Rotate square around y axis

I’ve attached a quicktime of what I would like.

basically I want to rotate a square around its own y axis.

Its part of my website I’m building. When the page loads a black
square with my logo is there. Then when a user clicks on it,
it spins to reveal contact info. The square goes from black to red
and I would like a nice ease into the end of the spin.
Then when the user clicks on the red it goes back to black and vice versa.

Whoa!!! I hope I’ve not bored you witless.

Any help will be much appreciated,