HTML--day03

1.装换transform

1.1二维平面移动

语法：

transform:translateX(移动的距离) translateY(移动的距离);

Transform:translate(水平移动距离，垂直移动距离)

可以设置负值，水平的正值是向右移动，垂直的正值是向下移动

1.2二维平面旋转

语法：

Transform:rotate(30deg);

旋转原点的设置

transform-origin:center(默认值)

可以设置left,top,right,bottom,center,

百分比设置：transform-origin:水平位置的百分比垂直位置的百分比

1.3 3D转换透视点

在所看元素的父元素或者是祖先元素上设置透视点

语法:perspective: 1000px;

1.4三维立体的移动

语法：

transform: translateZ(200px);

transform: translate3d(水平移动,垂直移动,z轴移动);

z轴：z轴垂直于屏幕，方向是射向我们。

1.5三维立体的旋转

语法：

/*transform: rotateX(30deg);*/

/*transform: rotateY(30deg);*/

/*transform: rotateZ(30deg);*/

transform: rotate3d(1,1,1,30deg);

解析：rotate3d(x,y,z,30deg),用x,y,z建立一个用原点射向（x,y,z）这个坐标的向量，用这个向量作为轴进行旋转。

1.6缩放

语法：

transform:scale(整体放大的倍数)

Transform:scale(水平缩放的倍数，垂直缩放的倍数)

1.7倾斜

语法：transform: skew(15deg,0deg);

小技巧：如果先要文字板正，那么反倾斜即可

2.Transition过渡

综合设置：

transition: all 2s;

分别设置：

/*过渡效果*/
/*transition:height 2s,transform 3s,background 2s;*/
/*transition: all 2s linear;*/
/*过渡的属性*/
transition-property: all;
/*过渡所消耗的时间*/
transition-duration: 2s;
/*过渡变化的速度
 linear线性速度
 ease/ease-in/ease-out
 cubic-bezier(0.57,-0.34, 0.37, 1.44)
 * */
transition-timing-function: cubic-bezier(0.57,-0.34, 0.37, 1.44);
/*过渡的延迟时间*/
/*transition-delay: 2s;*/

3.Animation 动画

综合设置语法：animation: donghua 4s infinite;

分别设置：

/*动画*/
/*animation: donghua 5s;*/
/*动画的名称*/
animation-name: donghua;
/*一次动画所花费的时间*/
animation-duration: 3s;
/*动画的速度*/
animation-timing-function: linear;
/*动画延迟时间*/
animation-delay: 3s;
/*设置动画的次数*/
animation-iteration-count: 3;
/*设置动画的往返*/
animation-direction: alternate;
/*保留最后一刻状态*/
animation-fill-mode: forwards;

不同状态写在关键帧里

@keyframes donghua{
                0%{
                    transform: translate(0,0);
                }
                50%{
                    transform: translate(500px,0);
                }
                100%{
                    transform: translate(500px,500px);
                }
            }

1.4弹性布局

弹性容器：

元素上设置了display:flex;的元素就是弹性容器

弹性子元素：

元素上设置了display:flex;的元素就是弹性容器里面的直接子元素就是弹性子元素。

语法：display:flex;

主轴分布的设置：

justify-content:
 flex-start
 flex-end
 center
 space-around:平均分布，两边有间距，两边的间距是中间的一半
 space-between:平均分布，两边没有间距
 space-evenly:平均分布，间距一样

侧轴分布的设置：

stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果
 flex-start
 flex-end
 center

换行：

语法：flex-warp:warp

多行分布的设置：

align-content:
 flex-start
 flex-end
 center
 space-around:平均分布，两边有间距，两边的间距是中间的一半
 space-between:平均分布，两边没有间距
 space-evenly:平均分布，间距一样

剩余空间的占据：

语法：Flex:数字；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .parent{
                width: 100%;
                height: 800px;
                margin: 0 auto;
                border: 1px solid #000;
                
                
                /*设置弹性容器*/
                display: flex;
                
            }
                
            .db{
                flex: 1;
                background: yellow;
            }
            .c1{
                /*占据剩余空间的1份*/
                flex: 2;
                background: green;
            }
            
            .c2{
                background: purple;
                width: 100px;
            }
            
            
        </style>
    </head>
    <body>
        <div class="parent">
            <!--db占据剩余空间3份中的1份-->
            <div class="db"></div>
            <!--c1是主要内容，占据剩余剩余空间3份中的2份-->
            <div class="child c1"></div>
            <!--假设c2是广告位，占100px宽度-->
            <div class="child c2"></div>
            
        </div>
    </body>
</html>

对弹性子元素进行排序：

语法：order:数字

根据order的数字，进行从小到大排序