Edit in JSFiddle

Result
CSS
HTML

.rotateX {
    -webkit-transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
}

.rotateX:hover {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

<img class="rotateX" src="http://www.chedanji.com/content/images/2015/05/zhuyin.jpg" alt="">