admin 管理员组

文章数量: 1184232

案例

案例-旋转中心（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>

本文标签： 案例

版权声明：本文标题：案例 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686529913a6460.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。