一、需求分析
给定一个 盒子模型 ,
鼠标移动上去后 , 通过旋转的方式 , 出现一个 新的 盒子模型 布局 ,
旋转上去后 , 新的布局会覆盖住之前的 盒子模型 ;
实现原理如下 :
在绘制的时候..., 预先绘制了两个 盒子模型 ,
一个是 空的 盒子模型 , 在 空盒子模型 中 , 绘制了一个 子盒子 ,
子盒子 是 有实际元素的 盒子模型 ;
有 实际内容 的 子盒子模型 , 初始状态就 沿着...左下角为中心点 , 顺时针旋转了 90 度 ;
如果 父容器 设置了
/* 隐藏边界之外的元素
旋转前的伪类 div::before 元素需要先隐藏...div::before 伪元素 上的效果 */
div:hover::before {
/* 鼠标移动上去后 */...盒子 模型上 , 旋转到 一半时的样式 :
旋转完成后的样式 :