CSS3-transform二维三维变换和flex伸缩布局

一、transform

1.二维变换

• 移动：translate

          /*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
          1.如果只有一个参数就代表x方向
          2.如果有两个参数就代表x/y方向*/
          /*transform: translate(100px);*/
          /*transform: translate(400px,500px);*/
          
          /*添加水平或者垂直方向的移动*/
           /*transform:translateX(300px);*/
           transform:translateY(300px);

• 缩放：scale

            /*实现缩放  1指不缩放，>1.01放大  <0.99缩小  参照元素的几何中心
            1.如果只有一个参数，就代表x和y方向都进行相等比例的缩放
            2.如果有两个参数，就代表x/y方向*/
            /*transform: scale(2);*/
            /*transform: scale(2,1);*/
            /*缩放指定的方向 */
            /*transform:scaleX(0.5);*/
            transform:scaleY(0.5);

• 旋转：rotate

            /*设置旋转轴心
            1.x y
            2.关键字：left top right bottom center*/
            transform-origin: left top;
            transform:rotate(-90deg);
            
            /*同时添加多个transform属性值*/
            transform: translateX(700px) rotate(-90deg);
            /*注意：旋转的参数只能有一个值，其他都可以有两个*/

ps：在添加多个transform属性时，一定要写在同一句话里面，不能分开写，因为后面的会把前面的重叠掉；而且一般都是先移动，再旋转，这个在后面制作立方体的时候非常重要

---

• 使用transform实现任意元素水平&垂直居中

        .box{
            width: 200px;
            height: 200px;
            position: absolute;
            /*定位的百分比是参照父容器的宽高*/
            left: 50%;
            top: 50%;
            /*使用transform实现元素的居中  百分比是参照元素本身的宽高*/
            transform: translate(-50%,-50%);
        }

2.三维变换

• 三维移动：translate3d

            /*translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)*/
            /*transform: translate3d(400px,0,0);*/
            /*transform: translate3d(400px,400px,0);*/
            transform: translate3d(0px,0px,400px);

• 三维缩放：scale3d

            /*scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)
            >1.01 放大   <0.99 缩小*/
            /*transform:scale3d(2,0.5,10);*/
            transform:scale3d(1,1,10);

• 三维旋转：rotate3d

            /*rotate3d(x,y,z,angle):
            x:代表x轴方向上的一个向量值
            y:代表y轴方向上的一个向量值
            z:代表z轴方向上的一个向量值*/
            transform: rotate3d(1,1,1,330deg);
            /*前面三个属性值x,y,z是一个空间向量，元素就以这个向量为轴旋转*/

• 让子元素保留3d变换之后的效果，给父元素添加 transform-style: preserve-3d;
• 添加透视景深效果：perspective: 0px; 可以在立方体里面观察这个立方体
• 设置透视的观察角度：perspective-origin: 0px 0px;

---

3.动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个关键帧来精确控制一个或一组动画，常用来实现复杂的动画效果.

• 添加动画

            /*添加动画效果*/
            /*1.animation-name:指定动画名称*/
            animation-name: moveTest;
            /*2.设置动画的总耗时*/
            animation-duration: 2s;
            /*3.设置动画的播放次数，默认为1次  可以指定具体的数值，也可以指定infinite(无限次)*/
            animation-iteration-count: 1;
            /*4.设置交替动画  alternate:来回交替*/
            animation-direction: alternate;
            /*5.设置动画的延迟*/
            animation-delay: 2s;
            /*5.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态
            forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
            backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
            both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态*/
            animation-fill-mode: both;
            /*6.动画的时间函数*/
            animation-timing-function: linear;
            /*设置动画的播放状态  paused:暂停   running:播放*/
            animation-play-state: running;

• 创建动画

        /*创建动画*/
        @keyframes moveTest {
            /*百分比是指整个动画耗时的百分比*/
            /*0%{
                transform: translate(0,0);
            }*/
            /*from和0%等价*/
            from{
                transform: translate(0,0) rotate(45deg);
            }
            50%{
                transform: translate(0,500px);
            }
            /*100%{
                transform: translate(500px,600px);
            }*/
            /*to和100%等价*/
            to{
                transform: translate(500px,600px);
            }
        }

ps：可以通过js控制animation-play-state的值来控制动画的播放状态

二、flex伸缩布局

• 伸缩布局

            /*设置父容器为伸缩盒子：会使每一个子元素自动变成伸缩项*/
            display: flex;
            /*设置子元素的排列方式*/
            justify-content: space-around;
            /*flex-start:让子元素从父容器的起始位置开始排列*/
            /*flex-end:让子元素从父容器的结束位置开始排列*/
            /*center:让子元素从父容器的中间位置开始排列*/
            /*space-between:左右对齐父容器的开始和结束，中间平均分页，产生相同的间距*/
            /*space-around:将多余的空间平均的分页在每一个子元素的两边，造成中间盒子的间距是左右
            两边盒子间距的两倍*/

• 伸缩布局属性：flex-flow

         /*flex-flow:是flex-wrap和flex-direction的综合
            
            flex-wrap:控制子元素是否换行显示，默认不换行
                nowrap:不换行--则收缩
                wrap:换行
                wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列
            
            flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)
                row:水平排列方向，从左到右
                row-reverse:水平排列方向，从右到左
                column:垂直排列方向，从上到下
                column-reverse：垂直排列方向，从下到上*/

         flex-flow: row wrap;

• 伸缩布局属性：flow-grow和flex-shrink

            /*设置父容器为盒子：会使每一个子元素自动变成伸缩项
            当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩*/
            /*flex-shrink:定义收缩比例，通过设置的值来计算收缩空间
             比例值计算 ：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
            flex-shrink的默认值为1*/
            flex-shrink: 2;/*默认值是1*/
            
            /*当子元素的宽度之和小于父容器宽度时，可以通过flow-grow来扩展子元素的宽度*/
            /*flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值
            比例值计算 ：当前空间的flex-grow/所有兄弟元素的flex-grow的和
            flex-grow的默认是0:说明子元素并不会去占据剩余的空间*/
            flex-grow: 1;

• 伸缩布局属性align-items：

            /*align-items:设置子元素(伸缩项)在侧轴方向上的对齐方式
            center:设置在侧轴方向上居中对齐
            flex-start:设置在侧轴方向上顶对齐
            flex-end:设置在侧轴方向上底对齐
            baseline:文本基线*/
            align-items:center;

			/*设置单个子元素的对齐方式*/
			align-self: baseline;

• 伸缩布局属性flex：
  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，大多数情况下没必要使用这种语法。一般使用flex: [number];这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例