效果图
html
<div>
</div>
css
div {
width: 100px;
height: 100px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
div:hover::after {
transform: rotate(0deg);
}
div::after {
display: inline-block;
content: '';
width: 100%;
height: 100%;
background-color: pink;
transform-origin: left bottom;
transform: rotate(90deg);
transition: all 1s;
}