css3的2d转换
属性：transform
属性值：translate
translate(x,y) 对盒子进行x轴和y轴的位移
translateX(n) 对盒子进行X轴的位移
translateY(n) 对盒子进行Y轴的位移
特点
translate不会影响其他元素的位置
translate中的百分比单位指的是相对于元素自身的宽度和高度的百分比来确定的 translate(50%,50%)， 第一个百分之50%指的是宽度的50%，第二个50%指的是高度的50%
利用2d转换实现定位盒子的水平和垂直居中：核心思想：先让盒子距离左侧50%的距离，距离顶部50%的距离，再使用translate属性移动盒子本身高度和宽度的一半，对行内元素没有效果
属性值：rotate 旋转角度
语法：transform:rotate(度数)
度数的单位是deg，度数为正数为顺时针旋转，度数为负数代表逆时针旋转
2D转换中心点：origin
transform-origin:x y;使用具体的像素值来进行中心点设置是，移动的参照点是盒子的左上角
transform-origin:right bottom; 可以使用方位名词来进行中心点设定，方位名词有：right/left/center/top/bottom
2D转换之缩放：scale
transform:scale(4); 代表宽和高都放大四倍
transform: scale(2,3); 代表宽放大2倍，高放大3倍
transform: scale(0.5,0.5); 代表宽度和高度都变为原来的一半（缩小0.5倍）
scale缩放和width/height设置盒子大小的区别：
width/height设置宽高是，上沿不动，只向下来改变宽高，会对其他的盒子有影响
scale进行缩放时，默认以盒子的中心点来进行缩放，并且不会影响其他的盒子
css3的动画制作
动画序列
0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列
在 @keyframes 中固定css的样式，可以创建由当前样式转化为新样式的动画效果 （keyframes 叫做关键帧）
可以改变任意多的样式和任意多的次数
可以使用百分比来规定变化发生的时间，或者使用关键字“from”和“to”来实现 等同于0%~100%
动画制作的步骤
定义动画
调用动画
动画的属性
@keyframes 规定动画
anmiation：所有动画属性的简写属性
anmiation-name：规定动画的名称
anmiation-duration：规定一个动画周期的时间，是必须值
anmiation-timing-function规定动画的运动曲线，默认是ease
anmiation-direction规定动画是否在下个周期逆行播放，默认是normal，逆向播放是alternate
anmiation-play-state规定动画是否暂停播放
anmiation-fill-mode 规定动画结束的状态，如果保持结束状态，用forwards，如果保持初始状态用backwards
复合属性：
amination:name/duration/timing-function/delay/iteration-count/direction/fill-mode;
Swiper制作轮播图
轮播图制作网站https://www.swiper.com.cn/
swiper的其他样式
寻找需要的样式在新窗口中打开
复制源码
修改引入文件路径
将js代码中的类名和整个swiper盒子的类名保持一致
修改自己需要的结构和样式即可
流式布局和flex布局
移动端的基础
pc端常见的浏览器
safari、火狐浏览器、谷歌浏览器、百度浏览器、uc浏览器、360浏览器
移动端常见浏览器
uc浏览器、夸克浏览器、qq浏览器、百度手机浏览器、搜狗手机浏览器
国内的uc和qq百度等浏览器都是根据webkit修改过来的内核，国内目前没有自主研发的浏览器内核
总结：兼容移动端浏览器主要关注webkit内核的浏览器即可
手机屏幕的分辨率
移动端设备的屏幕尺寸非常多，碎片化较严重，作为开发者不需要关注分辨率，常用的单位尺寸是px
手机端调试方法
chrome devtools的模拟手机调试
使用live serve启用网站，使用手机进行访问，手机和电脑要保持在同一局域网内
使用外网服务器部署网站后，直接使用ip地址或域名进行访问