MSI_0524ҦȺӢ
一.知识点总结
1.transform是css3的属性，该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform的值有：
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| translate(x,y) | 定义2D转换。移动 |
| translate3d(x,y,z) | 定义3D转换。 |
| translateX(x) | 定义转换，只是用X轴的值 |
| translateY(y) | 定义转换，只是用X轴的值 |
| translateZ(z) | 定义转换，只是用Z轴的值 |
| scale(x,y) | 定义2D缩放转换 |
| scale3d(x,y,z) | 定义3D缩放转换 |
| skew(x-angle,y-angle) | 定义沿着X和Y轴的2D倾斜转换 |
| rotate(angle) | 定义2D旋转 |
| rotate3D(angle) | 定义3D旋转 |
| rotateX(angle) | 定义沿着X轴的3D旋转 |
| rotate(angle) | 定义沿着Z轴的3D旋转 |
2.transition
transition属性设置元素当过渡效果，四个简写属性为：
transition-property 制定CSS属性的name，transition效果
transition-duration 效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay定义transition效果开始的时候
注：transition-timing-function常用的值有：
| 值 | 描述 |
|---|---|
| liner | 规定以相同速度开始至结束的过渡效果 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
3.动画
动画属性可以使得值逐渐从一个值变化到另一个值
@keyframes animationName{
from{}
to{}
}
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或 毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔 |
| animation-iteration-count | 定义动画的播放次数 |
| animation-direction | 指定是否应该轮流反向播放动画 |
| animation-direction | 指定是否应该轮流反向播放动画 |
| animation-play-state | 指定动画是否正在运行或已暂停 |
4.正常布局流是指在不对页面进行任何布局控制时。
5.float，常用right和left，以px为单位。
6.position；relative，相对定位，常使用Top，bottom，left和right属性。
position：absolut，绝对定位。
7.z-index,是对z轴的参考
8.position：sticky，粘性定位。
二.心得体会
马老师讲授的非常棒，给马老师点个赞。
三.疑问
1.请问马老师如果要做后端方向，对前端的知识需要了解到什么程度？
