css3 字体、2D转换、3D转换
学习篇之CSS3 字体、2D转换、3D转换
一、字体
@font-face
将字体文件存放到 web 服务器上，通过CSS3 @font-face规则中定义，它会在需要时被自动下载到用户的计算机上。
@font-face { font-family: myFonts;//定义字体名称
src: url(myFonts.ttf), url(myFonts.eot), url(myFonts.otf);//字体文件来源 可选.ttf、.eot、.otf等三种格式文件 }
PS：为了兼容不同浏览器最好提供多个不同文件格式的字体文件
二、2D转换
1、transform
transform兼容性：为了兼容大部分主流浏览器，需要添加相应前缀。如下所示，后续文档不重复表述。
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */
translate(30px,60px) 平移
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
transform: translate(50%, 50%);//基于正常文档流位置移动，可用于垂直居中div
scale(2,4) 缩放
元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
transform: scale(2,4); //宽度放大为原来的2倍、高度放大为原来的4倍
rotate(30deg) 旋转
元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
transform: rotate(30deg);//顺时针旋转30度
skew(30deg, 60deg)
元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数、
transform: skew(30deg, 60deg);//基于x轴翻转30度，y轴翻转60度
matrix(a,b,c,d,e,f)
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
通俗理解，通过矩阵转换求出新的坐标(x', y')来达到元素旋转、缩放、移动以及倾斜等效果。
其中ax+cy+e是水平坐标，bx+dy+f为垂直坐标
2、transform-origin
允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴
transform-origin: x-axis y-axis z-axis;
三、3D转换
translate3d(x,y,z)
translateX(30px)
translateY(60px)
translateZ(30px)
scale3d(x,y,z)
scaleX(2)
scaleY(4)
scaleZ(0.5)
rotate3d(x,y,z)
rotateX(30deg)
rotateY(60deg)
rotateZ(0deg)
