HTML CSS3变形移动、旋转、缩放、3d 、动画拉伸布局等笔记

2022-01-23 15:59:10 阅读：211 来源： 互联网

标签：CSS3 flex 缩放 100px transform HTML background child div

变形移动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: hotpink;
                transition: all 0.5s; /*变形移动所有*/
            }
            div:active{ /*鼠标活动时 状态为鼠标点击但是没有松开时触发 相当于点击事件*/
                /*transform: translateX(100px);*/ /*水平移动100px*/
                /*transform: translate(50%); *//*百分比代表是自身宽度的一半 不是父盒子的宽度*/
                /*transform: translate(50px);*/ /*点击之后x轴方向移动50px*/
                transform: translate(50px ,50px); /*点击之后 x y 轴方向移动50px*/
                /*transform: translateY(100px);*/ /*点击后y轴移动100px*/
            }
        </style>
    </head>
    <body>
        <div>点击我试试看</div>
    </body>
    </html>

居中对齐

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: deeppink;
                /*transform: translate(100px); 水平移动100px*/
                /*transform: translate(50%); 默认是X轴 水平移动自身宽度的一半*/
                /*transform: translateY(50%); 在y轴移动自身高度的一半*/
                /*定位移动*/
                position: absolute;
                left: 50%;
                top: 50%;
                /*margin-left: -100px;需要计算*/
                transform: translate(-50%,-50%); /*右移上移自身的一半 */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

transform:scale 图片缩放

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: hotpink;
                margin: 100px auto;
            }
            div:active{
                /*transform: scale(2);*/ /*水平 垂直縮放 一个参数代表宽 高都同时缩放*/    
                    transform: scale(1, 2); /*宽度不变，高度变2倍*/
            }
            section{
                width: 632px;
                height: 340px;
                margin: 0 auto;
                overflow: hidden; /*溢出隐藏*/
                border: 1px solid green;
            }
            section img{
                transform: all 0.2s; /*图片缩放 谁做动画，谁加过渡*/
            }
            section img:hover{
                transform: scale(1.8); /*缩放*/
            }
        </style>
    </head>
    <body>
        <div></div>
        <section>
            <img src="images/mi.jpg">
        </section>
    </body>
    </html>

transform:rote 旋转

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            img{
                margin: 100px;
                transition: all 3s ease-in 1s; /*全部属性过渡 过渡时长 动画曲线 何时开始*/
                /*border-radius: 50%;*/ /*圆角*/
                border-radius: 100px;
                border: 10px solid deeppink;
            }
            img:hover{
                /*transform: rotate(-90deg);*/ /*deg度数*/
                transform: rotate(720deg);
            }
        </style>
    </head>
    <body>
        <img src="images/chu.jpg">
    </body>
    </html>

沿x轴旋转

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            img{
                margin: 100px;
                transition: all 1s ease-in 0.2s;
            }
            /*img:active{*/
            .one:hover{
                transform: rotateX(360deg);
            }
            .two:hover{
                transform: rotateY(360deg);
            }
            .three:active{
                transform: rotateZ(180deg);
            }
            .four:active{
                transform: rotateX(45dep) rotateY(180deg) rotateZ(90deg) skew(0,10deg);
            }
        </style>
    </head>
    <body>
        <img class="one" src="images/3.jpg">
        <img class="two" src="images/4.jpg">
        <img class="three" src="images/5.jpg">
        <img class="four" src="images/6.jpg">
    </body>
    </html>

变换中心点旋转

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            img{
                margin: 200px;
                transition: all 0.6s; /*添加所有属性过渡效果*/
                transform-origin: 20px 30px; /*旋转中心点*/
            }
            img:hover{
                transform: rotate(360deg); /*x轴旋转360度*/
            }
        </style>
    </head>
    <body>
        <img src="images/pk1.png">
    </body>
    </html>

呈360旋转排列的图片

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 250px;
                height: 170px;
                border: 1px solid deeppink;
                margin: 400px auto;
                position: relative;
            }
            div img{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transition: all 0.6s; /*添加过渡属性*/
                transform-origin: top right; /*旋转的中心点*/
            }
            div:hover img:first-child{ /*鼠标经过div 第一张图片旋转60°*/
                transform: rotate(60deg); /*选装60°*/
            }
            div:hover img:nth-child(2){ /*鼠标经过div 第二张图片旋转60°*/
                transform: rotate(120deg); /*选装60°*/
            }
            div:hover img:nth-child(3){
                transform: rotate(180deg); /*选装60°*/
            }
            div:hover img:nth-child(4){
                transform: rotate(240deg); /*选装60°*/
            }
            div:hover img:nth-child(5){
                transform: rotate(300deg); /*选装60°*/
            }
            div:hover img:nth-child(6){
                transform: rotate(360deg); /*选装60°*/
            }

        </style>
    </head>
    <body>
        <div>
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
            <img src="images/5.jpg" alt="">
            <img src="images/6.jpg" alt="">
        </div>
    </body>
    </html>

变形skew倾斜

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                font-size: 50px;
                font-weight: 700;
                margin: 100px;
                transition: all 0.7s; /*过渡属性*/
            }
            div:hover{
                /*transform: skew(-30deg, 0);*/
                transform: skew(30deg, 0);
            }
        </style>
    </head>
    <body>
        <div>不经云清零天下会，荣登雄霸宝位</div>
    </body>
    </html>

rotateX旋转

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            /*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/
            body{
                perspective: 1000px;
            }
            img{
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            img:hover{
                transform: rotateX(360deg);
            }
        </style>
    </head>
    <body>
        <img src="images/pk1.png">
    </body>
    </html>

perspective 视距

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            /*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/
            body{
                perspective: 1000px;
            }
            img{
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            img:first-child:hover {
                transform: rotateX(360deg);
            }
            img:nth-child(2):hover {
                transform: rotateY(360deg);
            }
            img:nth-child(3):hover{
                transform: rotateZ(360deg);
            }
            img:last-child:hover{
                transform: skew(30deg);
            }
        </style>
    </head>
    <body>
        <img src="images/pk1.png">
        <img src="images/pk1.png">
        <img src="images/pk1.png">
        <img src="images/pk1.png">
    </body>
    </html>

透视效果

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            /*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/
            body{
                perspective: 1000px;
            }
            img{
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            img:first-child:hover {
                transform: rotateX(360deg);
            }
            img:nth-child(2):hover {
                transform: rotateY(360deg);
            }
            img:nth-child(3):hover{
                transform: rotateZ(360deg);
            }
            img:last-child:hover{
                transform: skew(30deg);
            }
        </style>
    </head>
    <body>
        <img src="images/pk1.png">
        <img src="images/pk1.png">
        <img src="images/pk1.png">
        <img src="images/pk1.png">
    </body>
    </html>

translateZ移动 3D效果

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            body{
                perspective: 600px;
            }
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                transition: all 1s; /*添加过渡*/
            }
            div:hover{
                /*transform: translateX(100px);*/
                /*transform: translateY(100px);*/
                transform: translateZ(300px); /*z控制物体与摄影机之间的距离 z越大 物体就越大 看似3D效果*/
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

translate3d
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            body{
                perspective: 700px;
            }
            div.box1{
                width: 200px;
                height: 200px;
                background-color: deeppink;
                transition: all 0.7s; /*所有的属性过渡*/
                margin: 100px auto;
                /*transform: translate(-50%,-50%); */
                transform: translate(-50%);
            }
            div:hover{/* 近大远小*/
                transform: translate3d(100px, 100px, 300px); /*参数 x y z 其中x y可以是px 或者是% Z只能是px*/
            }
            h4{
                transform: translate3d(0px, 50px, 0px);
                transition: all 0.6s;
            }
            h4:hover{
                transform: translate3d(0px, 0px, 0px);
            }
            .box{
                height: 1px;
                width: 100%;
                background-color: red;
                margin: 0;
            }
            /*清除浮动*/
            .clearfix::after{
                content: ">";
                display: block;
                height: 0;
                visibility: hidden;/* 隐藏盒子*/
                clear: both; /*清除浮动*/
            }
            .clearfix{
                *zoom:  1;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box"></div>
        <h4>小米：让每一个人都能平等的享受科技带来的乐趣</h4>
    </body>
    </html>

开门大吉

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>开门大吉</title>
            <style type="text/css">
                body{
                    background-color: green;
                }
                section{
                    width: 450px;
                    height: 300px;
                    margin: 100px auto;
                    border: 1px solid #000;
                    background: url(images/chu.jpg) no-repeat;
                    background-size: cover; /*保证图片充满整个区域*/
                    perspective: 1000px; /*给父盒子添加透视效果 */
                    position: relative;
                }
                /*宽度缩放一半*//*添加过渡效果*/
                .door-l,.door-r{
                    position: absolute;
                    top: 0;
                    width: 50%;
                    height: 100%;
                    background-color: green;
                    background: url(images/bg.png);
                    transition: all 1s;
                }
                /*左侧盒子按照左旋转*/
                .door-l{
                    left: 0;
                    border: 1px solid #000;
                    transform-origin: left;
                }
                .door-r{
                    right: 0;
                    border: 1px solid #000;
                    transform-origin: right;
                }
                .door-l::before,.door-r::before{ /*伪元素*/
                    content: "";
                    position: absolute; /*绝对定位*/
                    top: 50%;
                    width: 20px;
                    height: 20px;
                    border: 1px solid #000;
                    border-radius: 50%;
                    transform: translateY(-50%);
                }
                .door-l::before{
                    right: 15px;
                }
                .door-r::before{
                    left: 15px;
                }
                /*当鼠标经过selection盒子时候 翻转rotateY*/
                section:hover .door-l{
                    transform: rotateY(-130deg);
                }
                section:hover .door-r{
                    transform: rotateY(130deg);
                }
            </style>
    </head>
    <body>
        <section>
            <div class="door-l"></div>
            <div class="door-r"></div>
        </section>
    </body>
    </html>

两面翻转图片

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 224px;
                height: 224px;
                margin: 100px auto;
                position: relative; /*子绝父相*/
                transform-style: preserve-3d; /*保留当前位置  图片扁平滑*/
            }
            div img{
                position: absolute;
                top: 0;
                left: 0;
                transition: all 4s; /*添加过渡属性*/
            }
            div img:first-child{
                z-index: 1;
                backface-visibility: hidden; /*不是正面对着屏幕的就隐藏*/
            }
            div:hover img{
                transform: rotateY(180deg);
            }
        </style>
    </head>
    <body>
        <div><img src="images/qian.svg" alt=""><img src="images/hou.svg" alt=""></div>
    </body>
    </html>

CSS3动画属性
   @keyframes 规定动画
   animation 所用动画属性的简写
   animation-name 动画名称
   animation-duration 动画时长
   animation-timing-function 动画运动曲线默认ease
   animation-delay 何时开始
   animation-iteration-count 动画播放次数默认1
   animation-direction 是否在下一期逆向播放
   animation-paly-state 正在运行或者暂停默认 running
   animation-fill-mode 规定动画时间外的状态
   除了名字，动画时间延时有严格顺序要求，其他随便

animation

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: deeppink;
                /*animation: go 2s ease 0s 2 reverse;*/ /*动画名称go 运动时间2s 运动曲线ease 何时开始0s 播放次数2 [reverse 逆向 normal 正常+]*/
                /*animation: go 2s ease 0s 2 ;*/ /*顺时针2次*/
                /*animation: go 2s ease-in 0s infinite; *//*infinite 无线循环*/
                animation: go 2s ease-in 0s infinite alternate; /*normal正常 alternate 正常-反方向 交替 alternate reverse 先反在正 交替 */
            }
            @keyframes go {  /*定义动画 在x轴移动600px*/
                from{
                    transform: translateX(0px);
                }to{
                    transform: translateX(600px);
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

多组动画

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: deeppink;
                /*animation: go 2s ease 0s infinite alternate;*/ /*动画名称 动画时长 运动曲线 何时开始 无线循环 正-反交替*/
                animation: go 2s infinite; /*引用动画*/
            }
            @keyframes go { /*定义动画*/
                0%{ /*等价于from*/
                    transform: translate3d(0px, 0px, 0px);
                }
                25%{
                    transform: translate3d(800px, 0px, 0px);
                }
                50%{
                    transform: translate3d(800px, 400px, 0px);
                }
                75%{
                    transform: translate3d(0px, 400px, 0px);
                }
                100%{ /*相当于to*/
                    transform: translate3d(0px, 0px, 0px);
                }
                /*动画结束之后返回原来的位置*/
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

奔跑吧汽车动画

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            img{
                animation: car 5s infinite; /*引入动画*/
                }
            @keyframes car { /*定义动画*/
                0%{
                    transform: translate3d(0px, 0px, 0px);
                }
                50%{
                    transform: translate3d(1000px, 0px, 0px);
                }
                51%{
                    transform: translate3d(1000px, 0px, 0px) rotateY(180deg); /*如果是多组变形 都属于transform 用空格隔开*/
                }
                99%{
                    transform: translate3d(0px, 0px, 0px) rotateY(180deg);
                }
            }
        </style>
    </head>
    <body>
        <img src="images/car.jpg" width="250">
    </body>
    </html>

横幅无线滚动效果

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        nav{
            width: 1200px; /*200*6=1200  图片的宽度*展示图片的数量 前提是图片必须尺寸一致*/
            height: 100px;
            border: 1px solid pink;
            margin: 100px auto;
            overflow: hidden;
        }
        nav li{
            float: left; /*浮动*/
        }
        nav ul{
            width: 200%;
            animation: moving 10s linear infinite;/*引用动画 无线循环 linear匀速*/
        }
        @keyframes moving { /*定义动画*/
            form{
                transform: translateX(0);
            }
            to{
                transform: translateX(-1200px);
            }
        }
        nav:hover ul{ /*鼠标经过ul就暂停动画*/
            animation-play-state: paused; /*暂停动画*/
        }
    </style>
</head>
<body>
    <nav>
    <ul>
        <li><img src="images/1.jpg" width="200" height="100"></li>
        <li><img src="images/2.jpg" width="200" height="100"></li>
        <li><img src="images/3.jpg" width="200" height="100"></li>
        <li><img src="images/4.jpg" width="200" height="100"></li>
        <li><img src="images/5.jpg" width="200" height="100"></li>
        <li><img src="images/6.jpg" width="200" height="100"></li>
        <li><img src="images/1.jpg" width="200" height="100"></li>
        <li><img src="images/2.jpg" width="200" height="100"></li>
        <li><img src="images/3.jpg" width="200" height="100"></li>
        <li><img src="images/4.jpg" width="200" height="100"></li>
        <li><img src="images/5.jpg" width="200" height="100"></li>
        <li><img src="images/6.jpg" width="200" height="100"></li>
    </ul>
    </nav>
</body>
</html>

传统的三等分

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            section{
                width: 80%;
                height: 200px;
                border: 1px solid green;
                margin: 100px auto;
            }
            section div{
                width: 33.33%;
                height: 100%;
                float: left;
            }
            section div:nth-child(1){
                background-color: green;
            }
            section div:nth-child(2){
                background-color: orange;
            }
            section div:nth-child(3){
                background-color: deepskyblue;
            }
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

flex 伸缩布局

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
        /*    *{
                margin: 0;
                padding: 0;
            }*/
            section{
                width: 80%;
                height: 200px;
                border: 1px solid greenyellow;    
                margin: 100px auto;
                display: flex; 伸缩布局模式 这个盒子就会拥有弹性 可弹性盒子
            }
            div{
                height: 100%;
                /*flex: 1; 表示每个盒子都占一份*/
            }
            div:first-child{
                background-color: deeppink;
                flex: 1; /*子盒子占分数为1*/
            }
            div:nth-child(2){
                background-color: lawngreen;
                    flex: 2; /*子盒子占分数为1*/
            }
            div:last-child{
                background-color: lightseagreen;
                    flex: 1; /*子盒子占分数为1*/
            }


        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

flex伸缩固定布局

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            section{
                width: 80%;
                height: 200px;
                border: 1px solid #ccc;
                display: flex; /*伸缩布局模式*/
                min-width: 500;/*最小宽度500px*/
            }
            section div{
                height: 100%;
            }
            section div:first-child{
                background-color: green;
                width: 200px;
            }
            section div:nth-child(2){
                background-color: pink;
                flex: 1;
            }
            section div:last-child{
                background-color: deeppink;
                flex: 1;
            }
            /*说明：前面是固定的200px 后边两个盒子会平分剩余的宽度*/
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

伸缩布局排列方式

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            section{
                width: 80%;
                height: 200px;
                border: 1px solid rebeccapurple;
                display: flex; /*伸缩布局*/
                min-width: 500px;
                /*flex-direction: column;*/  /*排列方式是列*/
                /*flex-direction: row;*/ /*排列方式是row*/
                flex-direction: row-reverse; /*排列方式是反向row */
            }
            div:first-child{
                background-color: deepskyblue;
                flex: 1; /*分1份*/
            }
            div:nth-child(2){
                background-color: rebeccapurple;
                flex: 3; /*分3份*/
            }
            div:nth-child(3){
                background-color: green;
                flex: 1;
            }
            div:last-child{
                background-color: hotpink;
                /*height: 500px;*/
                width: 100px;
            }
        </style>
    </head>
    <body>
        <section>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </section>
    </body>
    </html>

justify-content 插入内容
   flex-start 默认从父盒子开头
   fled-end 项目位于父盒子结尾
   center 项目位于容器中心
   space-between 项目位于父盒子各行之间留有空白的容器内
   space-around 项目位于各行之前、之后、之间都留有空白的容器

justify-content

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            section{
                width: 1000px;
                height: 250px;
                border: 1px solid orange;
                display: flex; /*伸缩布局*/
                /*justify-content: flex-start; 默认*/
                /*justify-content: flex-end; 从父盒子右边添加*/
                /*justify-content: center; 从父盒子中心添加*/
                /*justify-content: space-between;*/ /*在父盒子宽度范围内平均空白的区域*/
                justify-content: space-around; /*在各控件之前之间之后平局分配空白区域*/
            }
            div{
                width: 200px;
                height: 250px;
            }
            div:first-child{
                background-color: deeppink;
                width: 400px;
            }
            div:nth-child(2){
                background-color: green;
            }
            div:last-child{
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

align-items 调整测轴对齐
   stretch 默认值项目被拉伸以适应容器前提子元素不要给高度
   center 项目位于容器中心
   flex-start 项目位于容器开头
   flex-end 项目位于容器结尾

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            section{
                width: 1000px;
                height: 500px;
                border: 1px solid green;
                display: flex; /*伸缩布局*/
                justify-content: space-between;
                /*align-items: flex-start; 默认上对齐*/
                /*align-items: flex-end; 底部对齐*/
                /*align-items: center; *//*垂直对齐*/
                align-items: stretch; /*拉伸高*/
            }
            section div{
                width: 200px;
                /*height: 100px;*/
            }
            div:first-child{
                background-color: greenyellow;
            }
            div:nth-child(2){
                background-color: orange;
            }
            div:last-child{
                background-color: powderblue;
            }
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

flex-wrap控制是否换行
   norwrap 不拆行不拆列压缩显示
   wrap 必要时拆行拆列
   wrap-reverse 相反顺序必要时拆行拆列

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        section{
            width: 1000px;
            height: 1000px;
            border: 1px solid green;
            display: flex; /*伸缩模式*/
            /*flex-wrap: nowrap; 默认 不换行 则压缩显示*/
            /*flex-wrap: wrap; 必要时拆分*/
            flex-wrap: wrap-reverse; /*反转*/
        }
        div{
            width: 250px;
            height: 200px;
        }
        div:first-child{
            background-color: green;
        }
        div:nth-child(2){
            background-color: orange;
        }
        div:nth-child(3){
            background-color: darkorange;
        }
        div:nth-child(4){
            background-color: limegreen;
        }
        div:nth-child(5){
            background-color: pink;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </section>
</body>
</html>

align-content 堆栈 [由flex-wrap产生的独立行对齐]
   align-content针对flex容器多轴情况 align-item是针对一行情况排列
   父元素必须设置display:flex 横向排列必须设置 flex-direction:row flex-wrap:wrap 属性才会起作用
   stretch 默认值项目被拉伸适应容器
   center 项目位于容器中心
   flex-start 项目位于容器开头
   flex-end 项目位于容器结尾
   space-between 项目位于各行之间的空白
   space-around 项目位于各行之前之间之后都留有控件容器内

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            section{
                width: 1000px;
                height: 800px;
                border: 1px solid purple;
                display: flex; /*拉神模式*/
                flex-flow: row wrap; /*必须设置这个属性 否则下边不起作用*/
                /*align-content: center; 项目居中*/
                /*align-content: flex-start; 位于父盒子开始排列*/
                /*align-content: flex-end; 位于父盒子的底部*/
                /*align-content: space-between; 垂直平分各行之前之后的空白容器区域*/
                /*align-content: space-around; 垂直平分各行之前之间之后的空白区域*/
                align-content: stretch; /*不要给子元素高度值*/
            }
            div{
                width:248px;
                /*height: 200px;*/
                border: 1px solid greenyellow;
                background-color: #00A477;
            }
        </style>
    </head>
    <body>
        <section>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </section>
    </body>
    </html>

order 排序数值越小越靠前

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        section{
            width: 1000px;
            height: 600px;
            border: 1px solid green;
            /*设置拉伸属性要给父类！！！*/
            display: flex;
            /*flex-wrap: wrap; 是否换行*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/ /*从父盒子右边添加*/
            /*justify-content: center;*/ /*从父盒子中心添加*/
            /*justify-content: space-around;*/ /*在各控件之前之间之后平局分配空白区域*/
            flex-wrap: wrap; /*必要时拆行拆列*/
            align-items: center; /*垂直居中*//*调整测轴对齐 垂直居中*/
            flex-direction: row;
            align-content: center; /*对战*/

        }
        div{
            width: 248px;
            height: 200px;
            border: 1px solid darkred;
            background-color: seagreen;
        }
        div:nth-child(7){
            background-color: pink;
            order: -1;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </section>
</body>
</html>

标签：CSS3,flex,缩放,100px,transform,HTML,background,child,div
来源： https://blog.csdn.net/qq_64353584/article/details/122652392

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML CSS3变形移动、旋转、缩放、3d 、动画 拉伸布局等笔记

HTML CSS3变形移动、旋转、缩放、3d 、动画拉伸布局等笔记