/*顺时针旋转45度，逆时针的话写成 -45*/
transform: rotate(45deg);
/*过渡动画 0.2秒*/
transition: all 0.2s;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.b {
position: relative;
margin: auto;
width: 200px;
height: 100px;
border:1px solid black;
}
.a {
position: absolute;
top:20px;
right: 20px;
display: block;
height: 20px;
width: 20px;
border-right: 1px solid red;
border-bottom: 1px solid red;
/*顺时针旋转45度,形成一个下箭头*/
transform: rotate(45deg);
}
div:hover .a {
/*顺时针旋转225度*/
transform: rotate(225deg);
/*过渡动画 0.2秒*/
transition: all 0.2s;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
来源：CSDN
作者：weixin_40551017
链接：https://blog.csdn.net/weixin_40551017/article/details/104458429