标签：效果 lte scale latex 等等 normal lin duration 距离
多列:
1、 分割列
属性：column-count:
值:数字；
2、 列间隔;
属性：column-gap:
值：（10px,1em）px单位
3、列规则
column-rule:width style color;
1、转换：
1、什么是转换：变形
2、属性
1 、transform
值：none
2、transform-function
注意：一个或多个函数中间用加空格
3、 转换原点
属性：transform-orgin；
默认情况下，转换原点在元素的中心点
取值：
1） value1 value2;(value1:x轴位置，value2:y轴上的位置)
2） value1 value2 value3(value3：z轴上面的位置)
3） 取值单位：1、px;2、(0%，0%) 3、left,right,bottom,top，center(关键字)
2、2D转换
位移（可能会覆盖其他元素）
属性：transform
值：函数：translate(x)；一个值默认的y轴移动的距离为0
translate(x，y)
translateX(x)
translateY(y)
单位：1、px;2、百分比3、负数
缩放：改变元素的大小
属性：transform
值:scale()
参数：scale(value);
Scale(x,y);
scaleX(x);
scaleY(x);
注意：一个参数，默认第一个参数和第二个参数相等；
X:x轴上的缩放比例
Y:Y轴上的缩放比例
取值：默认：1
缩小范围0-1之间
放大范围大于1；
旋转:（1、除了行元素都可以；2、原点选择）
属性：transform
取值：rotate()
单位：deg(度数)
N转换的角度（整数：顺时针旋转；负数：逆时针旋转）
倾斜：属性:transform
值：skew();
skew(xdeg);
skew(xdeg,ydeg);
skewX(xdeg);
skewY(ydeg);
注意：
skewX(xdeg)：最终效果改变y轴的倾斜角度（逆时针）；
skewY(ydeg)：最终效果改变x轴的倾斜角度（顺时针）；
3、3D转换：
1、3D:空间距离-空间轴-z轴
2、 空间距离：
1）属性：perspective
浏览器兼容性：属性加浏览器前缀；
2）作用：定义人眼到3D投射面的平面距离
定义位置：该属性（perspective）要定义在要实现3D转换（儿子）元素的父元素上
1、 位移：
属性和函数（transform：translate()）
translatex(x); translate(x,y); translatey(y) ; translatez(z) translate3d(x,y,z);
2、 旋转
属性：transform
函数：rotate()
1、 rotateX(xdeg);
2、 rotateY(ydeg);
3、 rotateZ(zdeg);
4、 rotate3D(x,y,z,ndeg);(x,y,z为0，三个轴不参与旋转，
（0,0,1，ndeg）z轴参与旋转)；
transform:rote3D(1,1,1,45deg)= rotateX(45deg); rotateY(45deg); rotateZ(45deg);
2、过渡：
1、什么是过渡：过渡（transition）,使css属性值，在一段时间内平滑过渡，能观察到变化的过程和最后呈现的结果；
2、过渡要素和属性
属性：transition-property
取值：1、none
2、all
3、property
Eg: transition-property:background; transition-property:width;
可以设置的过渡属性：1、颜色，数值，转换属性：transform，渐变，阴影，
3、 过渡时长
作用：过渡发生的时间
属性：transition-duration
取值：数字（单位：s/ms）
1s=1000ms
注意：该属性默认值为0，不发生过渡，所以一定要设置过渡时间；
4、 过渡速度时间曲线函数
属性：transition-timing-function
function取值：1、ease ：默认值，慢速开始，中间快速，慢速结束；
2、linear:匀速；
3、ease-in:慢速开始，加速效果；
4、ease-out:快速开始，减速效果；
5、ease-in-out:慢速的开始和结束，中间先加速再减速
5、过渡延迟：
1、作用：当用户激发过渡效果，等待多长时间后开始显示过渡效果；
2、transition-delay:
取值：数字s/ms;
默认值：0s;
3、触发过渡
1、:hover(鼠标滑过)
2、:active(点击链接)
3、:focus
4、js
transition：property(元素属性) duration(过渡时长) timing-function(过渡时长函数) delay(过渡延迟时间) ；
动画：
动画：（使元素从一种状态转变为另一种状态的形式）
完成动画的步骤：
1、 声明一个动画
要求：在特定的时间点上设置动画的样式；
时间点：
样式：元素的样式
2、 调用动画：
属性调用animation，调用动画；
并设置动画播放的时间，次数等等；
3、 怎么去声明动画：
@keyframes 动画名称{
0%|from{
动画初始样式
}
….
50%{
设置新的动画样式
}
100%|to{
动画结束时设置元素新的样式
}
}
注意：兼容性（@-webkit-keyframes 动画名称{} @-moz- keyframes 动画名称{}）
4、 动画调用:
1、 指定调用动画的，名称：
属性：animation-name
2、 调用动画所需要的周期时间：
属性：animation-duration（s/ms）
3、 设置动画完成的时间曲线函数：
animation-timing-function( ease linear ease-in ease-out ease-in-out)
4、 动画延迟：
animation-delay(s/ms)
5、 动画播放的次数：
属性：animation-iteration-count
1、 数值
2、 infinite循环
6、 动画播放的方向
属性：animation-direction
取值：1、默认正向播放（0%-100%）,normal;
2、 verse,逆向播放（100%-0%），
3、 奇数偶数播放，alternate，奇数（正向播放）偶数（逆向播放）
7、综合属性：animation:name(名称)duration（时间）delay(动画延迟时间)timing-function（曲线函数）teration-count direction;
标签：效果 lte scale latex 等等 normal lin duration 距离
原文地址：https://www.cnblogs.com/nnnyifang/p/8794717.html
