CSS 3D Transform effects
Thanks to http://www.w3schools.com/css3/css3_3dtransforms.asp.
HTML
<div class="rotatemecontainer"><div class="rotateme">Hover over me!</div></div>
CSS
.rotatemecontainer {
cursor: pointer;
display: inline-block;
font-family: sans-serif;
}
.rotateme {
padding: 50px;
margin: 100px 50px;
border-radius: 10px;
background: blue;
color: yellow;
font-weight: bold;
transition: transform 2s;
}
.rotatemecontainer:hover .rotateme {
transform: rotateY(180deg) rotateX(180deg) rotateZ(90deg);
-webkit-transform: rotateY(180deg);
transition: transform 2s;
}