案例-旋转中心（CSS3）

水深无声 2023-10-03 13:57 55阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

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

文章目录一、需求分析二、代码示例三、运行效果一、需求分析 --------------------

秒速五厘米/ 2023年10月14日 14:19/ 0 赞/ 22 阅读

相关【CSS3】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用方位词 / 百分比值 / 像素值设置旋转中心点 )

文章目录一、使用 transfrom-origin 设置旋转中心点二、代码示例 - 使用 transfrom-origin 设置旋转中心点 1

骑猪看日落/ 2023年10月14日 13:48/ 0 赞/ 53 阅读

相关案例-旋转木马（CSS3）

案例-旋转木马（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

水深无声/ 2023年10月03日 13:57/ 0 赞/ 64 阅读

相关案例-旋转中心（CSS3）

案例-旋转中心（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

水深无声/ 2023年10月03日 13:57/ 0 赞/ 56 阅读

相关 3D旋转（CSS3）

3D旋转（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta cha

- 日理万妓/ 2023年10月03日 13:39/ 0 赞/ 55 阅读

相关 css旋转木马案例

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAbGl1bGFuZzY4_size

分手后的思念是犯贱/ 2022年09月08日 00:30/ 0 赞/ 223 阅读

相关 CSS3——旋转方块

cube{ height: 200px; width: 200px; margin: auto; -webkit-transfo

迷南。/ 2022年08月09日 02:25/ 0 赞/ 199 阅读

相关 CSS3旋转

div { transform:rotate(7deg); -ms-transform:rotate(7deg); / IE 9 / -moz-transfor

曾经终败给现在/ 2022年06月11日 09:21/ 0 赞/ 234 阅读

相关 css3旋转

<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8" > < meta name=

迷南。/ 2022年06月02日 11:51/ 0 赞/ 247 阅读

相关 CSS3旋转

webkit内核的浏览器：-webkit-transform firefox浏览器：moz-transform 示例： <!DOCTYPE HTML>

待我称王封你为后i/ 2022年04月14日 06:07/ 0 赞/ 301 阅读