html5 旋转导航练习

ul{
   list-style: none;
   font-size: 24px;
   font-weight: bold;

}
a{
   text-decoration: none;
}
li{
   background: linear-gradient(to left,orange,red);
   150px;
   margin: 5px;
   padding: 10px 10px;
   border-radius: 5px;
}
#ul1 li{
   float: left;
}
li:hover{
   background: linear-gradient(to right,orange,red);
   transform: rotate(15deg);
   transform-origin: left top;
}
hr{
   clear: both;
   margin-top: 50px;
   border:3px dotted green;

}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>旋转菜单</title>
   <link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div>
   <ul id="ul1">
   <li><a href="#">aaaa</a></li>
   <li><a href="#">bbbb</a></li>
   <li><a href="#">cccc</a></li>
   <li><a href="#">dddd</a></li>
   </ul>
   <br><br>
   <hr>
   <ul id="ul2">
   <li><a href="#">aaaa</a></li>
   <li><a href="#">bbbb</a></li>
   <li><a href="#">cccc</a></li>
   <li><a href="#">dddd</a></li>
   </ul>

</div>
</body>
</html>

天道酬勤，厚积薄发。君子之行，静以修身，俭以养德。非淡泊无以明志，非宁静无以致远。如有恒，何须三更起，半夜眠；最怕莫，三天打鱼两天晒网，竹篮打水一场空。