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

![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转化

上一篇:2D转换


下一篇:2D-LSTM