【CSS3】CSS3 2D 转换 - rotate 旋转 ④ ( 旋转案例 )

秒速五厘米 2023-10-14 14:19 0阅读 0赞

#### 文章目录 ####

*  一、需求分析
 *  二、代码示例
 *  三、运行效果

## 一、需求分析 ##

--------------------

给定一个 盒子模型 ,

![在这里插入图片描述][c9256c6c234c4a0f80d85366e0bf871b.png]  
鼠标移动上去后 , 通过旋转的方式 , 出现一个 新的 盒子模型 布局 ,

![在这里插入图片描述][84e454773c2a46d7bfa3bcaea4c0cc03.png]

旋转上去后 , 新的布局会覆盖住之前的 盒子模型 ;  
![在这里插入图片描述][f5fa39810be7437d8786841490d5c79e.png]

**实现原理如下 :**

在绘制的时候 , 预先绘制了两个 盒子模型 ,

一个是 空的 盒子模型 , 在 空盒子模型 中 , 绘制了一个 子盒子 ,

子盒子 是 有实际元素的 盒子模型 ;

![在这里插入图片描述][8c95280ff76045d2993c8e9010b8f6d3.png]

有 实际内容 的 子盒子模型 , 初始状态就 沿着 左下角为中心点 , 顺时针旋转了 90 度 ;

如果 父容器 设置了

/* 隐藏边界之外的元素 
                   旋转前的伪类 div::before 元素需要先隐藏 */
                overflow: hidden;

样式 , 超出 父容器 边界的内容 , 就会自动隐藏 , 表现为下图的样式 :

![在这里插入图片描述][c9256c6c234c4a0f80d85366e0bf871b.png]

## 二、代码示例 ##

--------------------

实际的盒子模型内容 , 是通过 `div::before` 伪元素添加进去的 ;

`div::before` 伪元素 是行内元素 无法设置大小 , 需要 将其设置为行内块元素 才能设置宽高 ;

/* before 元素是行内元素 无法设置大小 
                   将其设置为行内块元素 才能设置宽高 */
                display: block;

为 实际内容 设置 旋转 相关的属性 : 旋转中心点 , 默认的初始角度 , 旋转的动画持续时间 ;

/* 设置以左下角为中心旋转 */
                transform-origin: left bottom;
                /* 绕 左下角 旋转 180 度 */
                transform: rotate(90deg);
                /* 设置过渡动画 */
                transition: all 1s;

**代码示例 :**

<!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>CSS3 2D 转换 - rotate 旋转</title>
        <style>
            div {
          
                width: 200px;
                height: 200px;
                /* 上下 100 像素外边距, 居中对齐 */
                margin: 100px auto;
                /* 设置 1 像素边框 */
                border: 1px solid pink;
                /* 隐藏边界之外的元素 
                   旋转前的伪类 div::before 元素需要先隐藏 */
                /* overflow: hidden; */
            }
            
            div::before {
          
                content: "2D旋转";
                /* before 元素是行内元素 无法设置大小 
                   将其设置为行内块元素 才能设置宽高 */
                display: block;
                width: 100%;
                height: 100%;
                /* 设置背景颜色 */
                background-color: cyan;
                /* 设置以左下角为中心旋转 */
                transform-origin: left bottom;
                /* 绕 左下角 旋转 180 度 */
                transform: rotate(90deg);
                /* 设置过渡动画 */
                transition: all 1s;
            }
            /* 设置 鼠标 移动到 div::before 伪元素 上的效果 */
            
            div:hover::before {
          
                /* 鼠标移动上去后  */
                transform: rotate(0deg);
            }
        </style>
    </head>
    
    <body>
        <div>
        </div>
    </body>
    
    </html>

## 三、运行效果 ##

--------------------

**初始状态为 :**

![在这里插入图片描述][d0b980c30f974d2b90724867b18c18a9.png]  
**鼠标移动到 盒子 模型上 , 旋转到 一半时的样式 :**

![在这里插入图片描述][3115479f157547f29771739c16705f6b.png]

**旋转完成后的样式 :**

![在这里插入图片描述][455ea77c9208483badb838f8db1a41ec.png]

[c9256c6c234c4a0f80d85366e0bf871b.png]: https://img-blog.csdnimg.cn/c9256c6c234c4a0f80d85366e0bf871b.png
[84e454773c2a46d7bfa3bcaea4c0cc03.png]: https://img-blog.csdnimg.cn/84e454773c2a46d7bfa3bcaea4c0cc03.png
[f5fa39810be7437d8786841490d5c79e.png]: https://img-blog.csdnimg.cn/f5fa39810be7437d8786841490d5c79e.png
[8c95280ff76045d2993c8e9010b8f6d3.png]: https://img-blog.csdnimg.cn/8c95280ff76045d2993c8e9010b8f6d3.png
[d0b980c30f974d2b90724867b18c18a9.png]: https://img-blog.csdnimg.cn/d0b980c30f974d2b90724867b18c18a9.png
[3115479f157547f29771739c16705f6b.png]: https://img-blog.csdnimg.cn/3115479f157547f29771739c16705f6b.png
[455ea77c9208483badb838f8db1a41ec.png]: https://img-blog.csdnimg.cn/455ea77c9208483badb838f8db1a41ec.png