<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border:1px solid #8669ae;
margin:100px auto;
overflow: hidden; /*看不见*/
}
div::after{
content: "黑马";
display: block;
width: 100%;
height: 100%;
background-color: rosybrown;
transform: rotate(180deg) ;
transform-origin: left bottom;
transition: all .5s;
}
div:hover::after{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例-旋转中心点案例
最新推荐文章于 2023-10-17 16:06:04 发布