1. 技术文章
  2. html：css3新特性：转换（二维，三维），过渡，动画，弹性布局

html：css3新特性：转换（二维，三维），过渡，动画，弹性布局

由 不想你离开。 提交于 2020-11-27 04:48:23

转换

2D转换

二维平面移动

语法：

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

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

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

二维平面旋转

语法：

Transform:rotate(30deg);

旋转原点的设置

 transform-origin:center(默认值)

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

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

 

3D转换

透视点

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

语法:perspective: 1000px;

三维立体的移动

语法：

transform: translateZ(200px);

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

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

三维立体的旋转

语法：

/*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）这个坐标的向量，用这个向量作为轴进行旋转。

 

/*二维移动*/
/*transform: translateX(400px) translateY(400px);*/
transform: translate(400px,400px);



/*旋转30度*/
transform: rotate(30deg);
                    
/*旋转原点的设置
 transform-origin:center(默认值)
 可以设置left,top,right,bottom,center,
 百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比
                 * */
transform-origin: 0% 50%;


/* 从什么视角看三维*/
body{
                perspective: 1000px;
            }
/*三维移动：transform: translateZ(200px);*/
transform: translate3d(0,0,200px);
/*三维旋转*/
/*transform: rotateX(30deg);*/
/*transform: rotateY(30deg);*/
/*transform: rotateZ(30deg);*/
transform: rotate3d(1,1,1,300deg);

    
    /*倾斜*/
transform: skew(15deg,0deg);
/*反方向*/
transform: skew(-15deg,0deg);


/*这张图宽还是1，高放大3倍；*/
img{
                display: block;
                margin: 300px auto;
                transform: scale(1,3);
                
            }

{
width: 300px;
                height: 200px;
                background: skyblue;
                margin: 300px auto;
                
整个放大两倍
/*transform: scale(2);*/
高不变，宽了3倍
transform: scale(3,1);

}

 

 

 

 

Transition过渡

 

综合设置：

 

transition: all 2s;

 

分别设置：

 

/*过渡效果*/

/*transition:height 2s,transform 3s,background 2s;*/

/*transition: all 2s linear;*/

/*保留子元素3d效果*/
transform-style: preserve-3d;

/*过渡的属性*/

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;*/

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #d1{
                width: 200px;
                height: 200px;
                background: skyblue;
                transform: rotate(0deg);
                
                /*过渡效果*/
                /*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;*/
            }
            
            
            
            /*鼠标悬浮上去的状态*/
            #d1:hover{
                height: 400px;
                transform: rotate(360deg);
                background: purple;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
    </body>
</html>

 

 

 

 

 

 

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);

}

}

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <style type="text/css">
            #d1{
                width: 300px;
                height: 200px;
                background: skyblue;
                
                /*动画*/
                /*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;
                
            }
            
            整个过程的50%所要达到的效果
            @keyframes donghua{
                0%{
                    transform: translate(0,0);
                }
                50%{
                    transform: translate(500px,0);
                }
                100%{
                    transform: translate(500px,500px);
                }
            }
            
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
    </body>
</html>

 

弹性布局

 

弹性容器：

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

弹性子元素：

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

 

 

语法：display:flex;

 

主轴分布的设置：

justify-content

 flex-start

 flex-end

 center

 space-around:平均分布，两边有间距，两边的间距是中间的一半

 space-between:平均分布，两边没有间距

 space-evenly:平均分布，间距一样

 

侧轴分布的设置：align-content

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

 flex-start

 flex-end

 center

 

align-items 属性 实例 居中对齐弹性盒的各项 <div> 元素

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

 align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

注意：容器内必须有多行的项目，该属性才能渲染出效果。

 

换行

语法：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的数字，进行从小到大排序

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .parent{
                width: 500px;
                height: 500px;
                
                margin: 0 auto;
                border: 5px solid brown;
                /*设置弹性容器*/
                display: flex;
                /*主轴的分布设置
                 * justify-content:flex-end;右边
                 * flex-start 左边
                 * center 居中
                 space-around:平均分布，两边有间距，两边的间距是中间的一半
                 space-between:平均分布，两边没有间距
                 space-evenly:平均分布，间距一样
                 */
                justify-content:space-evenly;
                /*
                 侧轴的分布
                 stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果
                 flex-start
                 flex-end
                 center
                 *
                align-items:flex-end ; */
                
                /*
                 弹性布局换行
                 flex-warp:warp
                 * */
                flex-wrap: wrap;
                
                /*
                 多行分布情况
                 align-content:
                 flex-start
                 flex-end
                 center
                 space-around:平均分布，两边有间距，两边的间距是中间的一半
                 space-between:平均分布，两边没有间距
                 space-evenly:平均分布，间距一样
                 * */
                align-content: center;
                
                
            }
            
            
            
                /*
 对弹性子元素进行排序
 order:数字
 根据order的数字，进行从小到大排序
             * */
            .d1{
                width: 100px;
                height: 100px;
                background: yellow;
                order: 6;
            }
            .d2{
                width: 100px;
                height: 100px;
                background: bisque;
                order: 5;
            }
            .d3{
                width: 100px;
                height: 100px;
                background: blue;
                order: 4;
            }
                .d4{
                width: 100px;
                height: 100px;
                background: bisque;
                order: 3;
            }
            .d5{
                width: 100px;
                height: 100px;
                background: blue;
                order: 2;
            }
            .d6{
                width: 100px;
                height: 100px;
                background: blue;
                order: 1;
            }
            
            
            
            
        </style>
    </head>
    <body><div class="parent">
        
    
        <div class="child d1">1</div>
        <div class="child d2">2</div>
        <div class="child d3">3</div>
        <div class="child d4">4</div>
        <div class="child d5">5</div>
        <div class="child d6">6</div>
        </div>
    </body>
</html>

 

<!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>

一个动画案例-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                perspective: 1000px;
            }
            .mofang{
                width: 200px;
                height: 200px;
                margin: 300px auto;
                /*保留子元素3d效果*/
                transform-style: preserve-3d;
                /*相对定位*/
                position: relative;
                
                
                /*动画名字，时间，无限滚动*/
                animation: donghua 1s infinite;
                
                
            }
            .mofang .a1{
                width: 100px;
                height:100px;
                /*保留子元素3d效果*/
                transform-style: preserve-3d;
                /*相对定位*/
                position: absolute;
                left: 50px;
                top: 50px;
                
                
                /*动画名字，时间，无限滚动*/
                animation: donghua 1s infinite;
            }
            
            @keyframes donghua{
                from{
                    transform: rotate3d(1,1,0,0deg);
                }
                to{
                    transform: rotate3d(1,1,0,360deg);
                }
            }
            
            .mofang .child{
                width: 200px;
                height: 200px;
                /*绝对定位*/
                position: absolute;
                left: 0;
                top: 0;
                /*透明度*/
                opacity: 0.6;
                /*所有过渡效果花费2s*/
                transition: all 2s;
            }
            .mofang .child1{
                width: 100px;
                height: 100px;
                /*绝对定位*/
                position: absolute;
                left: 0;
                top: 0;
                /*透明度*/
                opacity: 0.6;
                /*所有过渡效果花费2s*/
                transition: all 4s;
            }
            
            .front{
                /*插入背景图*/
                background-image: url(img/img1.jfif);
                /*背景图不重复*/
                background-repeat: no-repeat;
                /*背景图位置居中*/
                background-position: center;
                /*背景图大小:100% ，宽自定义*/
                background-size: 100% auto;
                
                transform: translateZ(100px);
            }/*鼠标点击*/
            .front1{
                /*插入背景图*/
                background-image: url(img/1525400116965.jpg);
                /*背景图不重复*/
                background-repeat: no-repeat;
                /*背景图位置居中*/
                background-position: center;
                /*背景图大小:100% ，宽自定义*/
                background-size: 100% auto;
                
                transform: translateZ(50px);
            }
            .mofang:hover .front{
                /*往Z轴移动200px*/
                transform: translateZ(200px);
            }
            
        .back{
                background-image: url(img/img2.jfif);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: translateZ(-100px);
            }
            .back1{
                background-image: url(img/4163e6ab177c4284a69e6340e8d2171b.jpeg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: translateZ(-50px);
            }
            
            .mofang:hover .back{
                transform: translateZ(-200px);
            }
            .left{
                background-image: url(img/img3.jfif);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: rotateY(-90deg) translateZ(100px);
            }
            .left1{
                background-image: url(img/21.jpg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: rotateY(-90deg) translateZ(50px);
            }
            .mofang:hover .left{
                transform: rotateY(-90deg) translateZ(200px);
            }
            .right{
                background-image: url(img/img4.jfif);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: rotateY(90deg) translateZ(100px);
            }
            .right1{
                background-image: url(img/201206191116426249.jpg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: rotateY(90deg) translateZ(50px);
            }
            .mofang:hover .right{
                transform: rotateY(90deg) translateZ(200px);
            }
            .top{
                background-image: url(img/img5.jfif);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: rotateX(90deg) translateZ(100px);
            }
            .top1{
                background-image: url(img/1525400116965.jpg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: rotateX(90deg) translateZ(50px);
            }
            .mofang:hover .top{
                transform: rotateX(90deg) translateZ(200px);
            }
            .bottom{
                background-image: url(img/img6.jfif);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: rotateX(-90deg) translateZ(100px);
            }
            .bottom1{
                background-image: url(img/006lpPzYly1fxcnr3mso3j30k00u075i.jpg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% auto;
                transform: rotateX(-90deg) translateZ(50px);
            }
            
            .mofang:hover .bottom{
                transform: rotateX(-90deg) translateZ(200px);
            }
        </style>
    </head>
    <body>
        <div class="mofang">
            <div class="child front"></div>
            <div class="child back"></div>
            <div class="child left"></div>
            <div class="child right"></div>
            <div class="child top"></div>
            <div class="child bottom"></div>
            <div class="a1">
            <div class="child1 front1"></div>
            <div class="child1 back1"></div>
            <div class="child1 left1"></div>
            <div class="child1 right1"></div>
            <div class="child1 top1"></div>
            <div class="child1 bottom1"></div>
        </div>
        
            
        </div>
        
        
    </body>
</html>

结果：在（网址中）二维码中https://00009ec4-000068ee-00006797.github.io/-/

 

标签
FLEX
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!