网站首页HTML/CSS
鼠标经过翻转效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标经过翻转效果</title>
<style type="text/css">
div {
   float: left;
   margin: 100px 0 0 100px;
   width: 250px;
   height: 250px;
   border: 5px solid #c4c7ce;
   border-radius: 50%;
   text-align: center;
   font-weight: 700;
   font-size: 18px;
   line-height: 5;
   transition: transform 1.5s;
}
#div-1:hover {
   transform: rotateX(180deg);
}
#div-2:hover {
   transform: rotateY(180deg);
}
#div-3:hover {
   transform: rotate(270deg);
}
#div-4:hover {
   transform: rotate(-270deg);
}
</style>
</head>
<body>
<div class="div" id="div-1"> 上下翻 </div>
<div class="div" id="div-2"> 左右翻 </div>
<div class="div" id="div-3"> 顺时针旋转 </div>
<div class="div" id="div-4"> 逆时针旋转 </div>
</body>
</html>