body > div {
margin: 100px 100px;
width: 200px;
height: 100px;
background: #000;
color: #7FFF00;
font-family: Arial;
font-weight: 500;
font-size: 3.5em;
text-align: center;
line-height: 100px;
transition: all 0.9s ease;
}
.rotate:hover {
-webkit-transform: rotateZ(-180deg);
-ms-transform: rotateZ(-180deg);
transform: rotateZ(-180deg);
}
<body> <div class="rotate">Rotate</div> </body>