Page Widget How to - Hover to Rotate menu item

Question

We would like to know how to hover to Rotate menu item.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--   ww  w.  j a va 2 s .com-->
  background: #091A1B;
  color: #544738;
  font-family: helvetica, sans-serif;
}

#nav {
  margin-top: 0px;
  float: right;
}

ul li {
  float: left;
  list-style: none;
  margin-right: 1em;
}

li a {
  color: #544738;
  text-decoration: none;
  float: left;
  font-size: 25px;
  padding: 12px;
}

li a:hover {
  -webkit-transform: rotate(-10deg) scale(1.2);
  -moz-transform: rotate(-10deg) scale(1.2);
  -o-transform: rotate(-10deg) scale(1.2);
  color: #25296F;
}

#box {
  background-color: black;
  width: 150px;
  height: 38px;
  margin-left: 500px;
  clear: both;
  margin-top: 500px;
}

#wrapper {
  overflow: hidden;
}
}
</style>
</head>
<body>
  <div id="wrapper">
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div id="box">
      <h3>ABOUT ME</h3>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: