<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 300px;
height:300px;
background-color: yellow;
/*弹性盒子设置垂直居中*/
display: flex;
align-items: center;
}
img{
transition: all 1s ease;
}
img:hover{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<div id="div1">
<div style="margin: auto"><img src="../img/H5.png" alt=""></div>
</div>
<div id="div2"></div>
</body>
</html>