CSS复习高级部分（三）web字体、2D转换transfroms、3D转换

![
一、 WEB字体
1、不同的字体格式
2、使用需要字体，与平时见到的CSS用法不同，这里用
@font-face{
font-family:’’
src:’’
}
3、CSS字体的相关属性
必须：font-family src
可选： font-stretch font-style font-weight unicode-range
二、transforms
transforms这个新特性，有一个特点，在移动元素的同时，却不会引起浏览器的重排，GPU会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。

1、translate，作用是平移
transfors:translate()，可以用于水平垂直居中布局，translate里的百分比是自身的百分比，而不是父元素

 top:50%;
 left:50%;
 transform: translate(-50%,-50%);

2、rotate
旋转
3、scale
放大缩小。
这里看到过一道面试题scale（0.5）是缩小一半，scale（2）是放大两倍，那么scale（-1是什么）水平翻转 scale(-1,-1),就是x轴上翻转一下,y轴上翻转一下
4、skew
二维平面上的倾斜转换，和rotate不同的是,rotate没有改变原来的样子，skew会变形，试一下就知道了

三、3D转化