css3 知识点

css3知识点逆战班

1.transform表示变形
2.所有变形都不会影响到其他元素，跟相对定位差不多，它只能添加给block标签和in-block标签对于内联标签不起作用。
3.transform有以下五种常用属性
（1）transform:translate(x轴，y轴 z轴)位移
x轴和y轴z轴表示像素一定要记得用逗号隔开，有正负值 x y他可以写成数字也可以写成百分数。它还可以单独写例如**transform：translateX( 像素)**他表示像x轴位移多少像素 transform:translateY(像素);表示延Y轴平移；
**transform:translateZ(num); 表示延Z轴平移 ( 3d ）**用于3d写法

（2）scale：缩放。

（1）transform:scale(数值);只写一个数字的话是一个比例值，正常比例是1；
（2）transform:scale(宽，高 );//两个值 分别对应宽和高；
（3） transform:scaleX(数值);X轴方向缩放；
（4）transform:scaleY(数值);Y轴方向缩放；
（5）transform:scaleZ(数值) ;Z轴方向缩放( 3d )；
.rotate：旋转。下面为rotate属性值的相关写法：
（1）transform:rotate(num);//num是旋转的角度，有正负值正值为顺时针旋转，负值为逆时针旋转。在数值后要加单位 deg（角度，常用）或rad（弧度）；
（2） rotateX(num);绕X轴旋转**（3d）；
（3）rotateY(num);绕Y轴旋转；（3d）**
（4）rotateZ(num);绕Z轴旋转它是默认值

skew：斜切。下面为skew属性值的相关写法：
（1） transform:skew(x,y) ;//num1和num2都是角度，针对的是x轴 和 y轴；
（2）transform:skewX(数值);X轴方向斜切 ；
（3）transform:skewY(数值);Y轴方向斜切；
斜切没有3d写法
位移会受到后面的旋转缩放的影响 浏览器先执行后面的在执行前面的 第一个数字是表示变形的总时间 第二个数字表示的是延迟或提前的时间

**tranform-origin:基点位置。**根据它设定的基点进行旋转 和缩放

Animation动画 重点比较难以理解
animation-fill-mode : 定义动画播放前后，其动画效果是否可见。
none 默认值 运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效；
backwards : 在延迟的情况下，让0%在延迟前生效；
forwards : 在运动结束的之后，停到结束位置；
both : backwards和forwards同时生效；
**reverse : 永远都是反向 , 从100%~0%；**alternate : 一次正向，一次反向；

animation-name：自定义动画名称。
animation-duration：定义动画播放完所用时间。
animation-delay：动画播放的延迟或提前时间
animation-iteration-count：定义动画的重复次数，默认值是1次 infinite表示无限次数
animation-timing-function：定义动画的速度曲线** linear（匀速）、ease（先加后减）ease-in（从0开始加速的缓动）、ease-out（减速到0的动）、ease-in-out（前半段从0开始加速， 后半段减速到0） 贝塞尔曲线**
animation：name duration delay iteration-count timing-function;
第一个数字是总时间 第二个是提前或延迟的时间 他俩用 / 分开
{animation:name duration delay iteration-count timing-function;}
@keyframes name{
0%/from{}
100%/to{}
}

3D
perspective景深、3d眼睛:离屏幕的距离 值越大，动画效果越不明显。变形中 rotateX、rotateY、translateZ、scaleZ都是3D效果，给加动画元素的父元素设置合适数值的景深，就能观察到完整的动画效果

制作过程
（1）先把静态效果做出来；
（2）把要运动的终点位置先做出来；
（3）指定transform变形中对应的0值（结束点的位置）；
（4）写transform变形的起点值（起点位置）；

• 点赞
• 收藏
• 分享
• 文章举报