案例
案例-旋转中心（CSS3）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-旋转中心</title><style>div {overflow: hidden;width: 200px;height: 200px;border: 1px solid skyblue;/* margin: 100px auto; */margin: 10px;float: left;}div::before {content: "元素";/* before元素属于行内元素，没有大小，所以在需要设置其大小之前需要先将其转换为块级元素 */display: block;width: 100%;height: 100%;background-color: gray;transform: rotate(180deg);transform-origin: left bottom;/* 谁过渡给谁加 */transition: all 0.6s;}div:hover::before {transform: rotate(0deg);}/* 鼠标经过div 里面的before 复原 */</style>
</head><body><div></div><div></div><div></div><div></div><div></div><div></div><div></div></body></html>
案例
案例-旋转中心（CSS3）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-旋转中心</title><style>div {overflow: hidden;width: 200px;height: 200px;border: 1px solid skyblue;/* margin: 100px auto; */margin: 10px;float: left;}div::before {content: "元素";/* before元素属于行内元素，没有大小，所以在需要设置其大小之前需要先将其转换为块级元素 */display: block;width: 100%;height: 100%;background-color: gray;transform: rotate(180deg);transform-origin: left bottom;/* 谁过渡给谁加 */transition: all 0.6s;}div:hover::before {transform: rotate(0deg);}/* 鼠标经过div 里面的before 复原 */</style>
</head><body><div></div><div></div><div></div><div></div><div></div><div></div><div></div></body></html>