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

韩曙亮

发布于 2023-10-11 20:20:50

34400

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、需求分析

给定一个盒子模型 ,

鼠标移动上去后 , 通过旋转的方式 , 出现一个新的盒子模型布局 ,

旋转上去后 , 新的布局会覆盖住之前的盒子模型 ;

实现原理如下 :

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

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

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

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

如果父容器设置了

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

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

二、代码示例

实际的盒子模型内容 , 是通过 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>