CSS3-慕课网知识点

CSS3转换-2D

1.rotate:2D旋转，以上为0度正数顺时针，负数逆时针。

2.translate：可以分开写translateX（）和translateY（）,括号里面具体的值。 合并写translate(x,y);例：translate(200px,50%)。

3.scale:大小，x和y方向拉升或压缩。也可以分开写，scaleX()和scaleY(). scale(x,y)。坐标原点为中心点，只用一个参数时是等比例缩小放大，小于1缩小大于1放大。

4.skew:扭曲，斜切扭曲，x轴和Y轴分别为圆心中心点的轴线。 skewX(度数)：值为正时逆时针，负值为顺时针。 skewY(度数)：值为正时顺时针，负值为逆时针。 skew(x,y):只有一个值默认为X轴。 　

CSS3转换-3D

1.rotate3d：3d旋转：可以分开成rotateX,rotateY和rotateZ写。 合并：rotate3d(x,y,z,angle),x,y,z的取值0-1，0时没有，1时正常，小数时改变的度数要乘以后面给的 angle度数，4个参数不允许省略。 2.translate3d：(x,y,z)对应xyz，参数不允许省略，也可以单独分开写translateY()。

3.scale3d(x,y,z) transform-origin:x-axis,y-axis,z-axis.设置原点位置， 可以用left,top,right,bottom表示，也可以用百分比和像素表示。 　

过渡概念 　

transition-timing-function

linear：线性平滑。

ease：平滑过渡。

ease-in：慢到快。

ease-out：快到慢。

ease-in-out：慢快慢，比较平滑，推荐用这个。 　

transition-duration 表示过度持续时间：transition-duration：？s； 　

transition-delay 表示延迟多少时间后执行过渡效果：transition-delay：？s； 　

简写形式 transition:property duration timing-function delay; 　

CSS3多列 　

columns column-width:/auto;表示每列长度

column-count:<length>/auto;表示多少列数

column-gap:<length>/normal; 设置列间隙宽度，normal默认值自动匹配字体大小像素

column-rule: style color; 设置列与列之间的边框样式颜色 column-span:none/all; 设置元素是否跨列显示。 　

用户界面

text-overflow:clip溢出截断/ellipsis溢出部分替换为(...)

white-space:nowrap;强制不换行

css3的resize属性

设置检索对象的区域是否允许用户缩放，调节元素尺寸大小

resize:none|both|horizontal|vertical none:不允许用户调整元素大小；both：用户可以调节元素的宽度和高度； horizontal:用户可以调节元素的宽度；vertical：用户可以调节元素的高度；

user-select：none/文本不可被选中