css3-03转换、动画、布局

一,transform四种简单动画:
(1),旋转动画
/* 旋转,正值为顺时针 */
transform: rotate(100deg);
/* 整个元素沿着中心点的x轴旋转 逆时针*/
transform: rotateX(30deg);
/* 整个元素沿着中心点的Y轴旋转  逆时针 */
transform: rotateY(30deg);
/* 整个元素沿着中心点的Z轴旋转 会按照中心点旋转 顺时针*/
transform: rotateZ(30deg);
/* 前面对应的数字无数字大小区别,只有正负区别,正则依然逆时针,负数则顺时针 */
transform: rotate3d(10,0,0,30deg);

(2),平移动画
/* 沿着中心点向Z轴方向平移 */
transform:translateZ(100px);
    /* 沿着中心点向X轴方向平移 */
transform:translateX(100px);
    /* 沿着中心点向Y轴方向平移 */
transform:translateY(100px);

(3),挤压扭曲
/* 跟x轴平行的两条边依然平行,但是这两条边逐渐分开 */
transform: skewX(30deg);
/* 跟Y轴平行的两条边依然平行,但是这两条边逐渐分开 */
transform: skewX(30deg);
/* 如果两个值都改动,则没有啥平行的,两边尖角等于90-x-y的度数 */
/* 如果x+y的值大于90,则整个元素消失 */
transform: skew(30deg,30deg);

(4),缩放动画
/* 缩放,scale(0.2,2) 水平缩小为初始的0.2倍,垂直放大为初始值的两倍*/
transform: scale(0.8,1.5);

(5),透视效果
/* 透视距离 800-2000之间 不用加单位*/
perspective: 300;

二,复杂的animation动画封装
(1),写进一个属性里面(常用)
 /* 动画总属性:动画名 时间 运动函数  */
animation: move 3s ease;  

(2),动画名称:自定义动画名称aa bb cc
animation-name: move;

(3),运行时间:写入秒数,单位是s
animation-duration: 5s;

(4),定义动画最后一帧:backwards  forwards  both
animation-fill-mode: both;

(5),延迟执行的时间,不写默认为0s
animation-delay: 1s;

(6),动画执行的次数:0-5 或者infinite无限次数
animation-iteration-count: 2;

(7),动画是否交替运动:默认为normal,无效果;alternate,交替运行
animation-direction: normal;

(8),运动方式:linear,匀速运动;ease,匀加速运动;cubic-bezier(),贝塞尔曲线,可填不同值;
/* 运动方式 匀速 加速 贝塞尔 */
animation-timing-function: ease-in;

(9),暂停动画,可加于划过伪类选择器中体现:running运行,paus暂停
div:hover{
            animation-play-state: running;
        }

(10),必不可少的封装动画
@keyframes move {
            /* form 和0% 一样 to等于100% */
            /* form{//等于0%
                background: red;
            }
            to{//等于100%
                background: green;
            } */
            0% {
                background: red;
                transform: translate(0px,0px);
            }
            100% {
                background: blue;
                transform: translate(0px,0px);
            } }

三,多列布局
记住3个常用的属性即可
(1),column-count:3;可以分成3栏(必须含有中文)
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

(2),分栏直接的间隙可以通过属性设置column-gap
div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;//分栏的间隙为40px
}

(3),列与列之间的边框的样式column-rule-style: solid;
div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}

分列属性表
属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
columns 设置 column-width 和 column-count 的简写
display: flex;
flex-direction: row;
justify-content: space-between;
align-items:center;
flex-wrap:wrap;
align-content: space-around;

未完待续...