<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ height: 50px; } ul li{ width: 100px; display: inline-block; padding: 20px; background: #ccc; position: relative; -webkit-transform-style: preserve-3d; transition: 2s; } ul li:hover{ transform: rotateX(180deg); } ul li span{ width: 100%; position: absolute; left:0px; top: 0px; -webkit-backface-visibility: hidden; } .back{ transform:rotateX(180deg); } </style> </head> <body> <ul> <li><span>nav-1</span><span class="back">11</span></li> <li><span>nav-2</span><span class="back">22</span></li> <li><span>nav-3</span><span class="back">33</span></li> <li><span>nav-4</span><span class="back">44</span></li> <li><span>nav-5</span><span class="back">55</span></li> </ul> </body> </html>